underpost 2.8.86 → 2.8.87

package/src/api/user/user.router.js

@@ -4,6 +4,7 @@ import { loggerFactory } from '../../server/logger.js';
 import { UserController } from './user.controller.js';
 import express from 'express';
 import { DataBaseProvider } from '../../db/DataBaseProvider.js';
+import { FileFactory } from '../file/file.service.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -11,9 +12,10 @@ const UserRouter = (options) => {
   const router = express.Router();
 
   (async () => {
-    const models = DataBaseProvider.instance[`${options.host}${options.path}`].mongoose.models;
-    if (models.User) {
-      try {
+    // admin user seed
+    try {
+      const models = DataBaseProvider.instance[`${options.host}${options.path}`].mongoose.models;
+      if (models.User) {
         const adminUser = await models.User.findOne({ role: 'admin' });
         if (!adminUser) {
           const defaultPassword = process.env.DEFAULT_ADMIN_PASSWORD || 'changethis';
@@ -29,10 +31,13 @@ const UserRouter = (options) => {
           });
           logger.warn('Default admin user created. Please change the default password immediately!', result._doc);
         }
-      } catch (error) {
-        logger.error('Error checking/creating admin user:', error);
       }
+    } catch (error) {
+      logger.error('Error checking/creating admin user');
+      console.log(error);
     }
+
+    // default user avatar seed
     options.png = {
       buffer: {
         'invalid-token': fs.readFileSync(`./src/client/public/default/assets/mailer/api-user-invalid-token.png`),
@@ -43,6 +48,27 @@ const UserRouter = (options) => {
         res.set('Content-Type', 'image/png');
       },
     };
+
+    try {
+      const models = DataBaseProvider.instance[`${options.host}${options.path}`].mongoose.models;
+      const name = 'api-user-default-avatar.png';
+      const imageFile = await models.File.findOne({ name });
+      let _id;
+      if (imageFile) {
+        _id = imageFile._id;
+      } else {
+        const file = await new models.File(
+          FileFactory.create(fs.readFileSync(`./src/client/public/default/assets/mailer/${name}`), name),
+        ).save();
+        _id = file._id;
+      }
+      options.getDefaultProfileImageId = async () => {
+        return _id;
+      };
+    } catch (error) {
+      logger.error('Error checking/creating default profile image');
+      console.log(error);
+    }
   })();
 
   router.post(`/mailer/:id`, authMiddleware, async (req, res) => {

package/src/api/user/user.service.js

@@ -9,7 +9,6 @@ import { DataBaseProvider } from '../../db/DataBaseProvider.js';
 import { FileFactory } from '../file/file.service.js';
 import { UserDto } from './user.model.js';
 import { selectDtoFactory, ValkeyAPI } from '../../server/valkey.js';
-import { getDefaultProfileImageId } from '../../server/client-icons.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -129,7 +128,7 @@ const UserService = {
             if (!user.profileImageId)
               await User.findByIdAndUpdate(
                 user._id,
-                { profileImageId: await getDefaultProfileImageId(File) },
+                { profileImageId: await options.getDefaultProfileImageId(File) },
                 {
                   runValidators: true,
                 },
@@ -212,7 +211,7 @@ const UserService = {
         if (validatePassword.status === 'error') throw new Error(validatePassword.message);
         req.body.password = await hashPassword(req.body.password);
         req.body.role = req.body.role === 'guest' ? 'guest' : 'user';
-        req.body.profileImageId = await getDefaultProfileImageId(File);
+        req.body.profileImageId = await options.getDefaultProfileImageId(File);
         const { _id } = await new User(req.body).save();
         if (_id) {
           const user = await User.findOne({ _id }).select(UserDto.select.get());
@@ -313,7 +312,7 @@ const UserService = {
         if (!file && !(await ValkeyAPI.getValkeyObject(options, req.auth.user.email))) {
           await User.findByIdAndUpdate(
             user._id,
-            { profileImageId: await getDefaultProfileImageId(File) },
+            { profileImageId: await options.getDefaultProfileImageId(File) },
             {
               runValidators: true,
             },

package/src/cli/cluster.js

@@ -410,21 +410,10 @@ EOF
         const successInstance = await UnderpostTest.API.statusMonitor('mongodb-0', 'Running', 'pods', 1000, 60 * 10);
 
         if (successInstance) {
-          if (!options.mongoDbHost) options.mongoDbHost = 'mongodb-service';
+          if (!options.mongoDbHost) options.mongoDbHost = 'mongodb-0.mongodb-service';
           const mongoConfig = {
             _id: 'rs0',
-            members: [
-              {
-                _id: 0,
-                host: `${options.mongoDbHost === 'mongodb-service' ? 'mongodb-0.' : ''}${options.mongoDbHost}:27017`,
-                priority: 1,
-              },
-              // {
-              //   _id: 1,
-              //   host: `${options.mongoDbHost === 'mongodb-service' ? 'mongodb-1.' : ''}${options.mongoDbHost}:27017`,
-              //   priority: 1,
-              // },
-            ],
+            members: options.mongoDbHost.split(',').map((host, index) => ({ _id: index, host: `${host}:27017` })),
           };
 
           shellExec(
@@ -683,17 +672,9 @@ net.ipv4.ip_forward = 1' | sudo tee ${iptableConfPath}`,
       }
     },
 
-    /**
-     * @method getResourcesCapacity
-     * @description Retrieves and returns the allocatable CPU and memory resources
-     * of the Kubernetes node.
-     * @param {boolean} [isKubeadmOrK3s=false] - If true, assumes a kubeadm or k3s-managed node;
-     * otherwise, assumes a Kind worker node.
-     * @returns {object} An object containing CPU and memory resources with values and units.
-     */
-    getResourcesCapacity(isKubeadmOrK3s = false) {
+    getResourcesCapacity(node) {
       const resources = {};
-      const nodeName = isKubeadmOrK3s ? os.hostname() : 'kind-worker';
+      const nodeName = node ?? os.hostname();
       const info = shellExec(`kubectl describe node ${nodeName} | grep -E '(Allocatable:|Capacity:)' -A 6`, {
         stdout: true,
         silent: true,

package/src/cli/db.js

@@ -177,25 +177,6 @@ class UnderpostDB {
                         }`,
                       );
                     }
-                    if (false) {
-                      const containerBaseBackupPath = '/backup';
-                      let timeFolder = shellExec(
-                        `sudo kubectl exec -i ${podName} -- sh -c "cd ${containerBaseBackupPath} && ls -a"`,
-                        {
-                          stdout: true,
-                          disableLog: false,
-                          silent: true,
-                        },
-                      ).split(`\n`);
-                      timeFolder = timeFolder[timeFolder.length - 2];
-                      if (timeFolder === '..') {
-                        logger.warn(`Cannot backup available`, { timeFolder });
-                      } else {
-                        shellExec(
-                          `sudo kubectl cp ${nameSpace}/${podName}:${containerBaseBackupPath}/${timeFolder}/${dbName} ${_toNewBsonPath}`,
-                        );
-                      }
-                    }
                   }
                   break;
                 }

package/src/cli/deploy.js

@@ -22,13 +22,13 @@ const logger = loggerFactory(import.meta);
 class UnderpostDeploy {
   static NETWORK = {};
   static API = {
-    sync(deployList, { versions, replicas, kubeadm = false }) {
+    sync(deployList, { versions, replicas, node }) {
       const deployGroupId = 'dd.router';
       fs.writeFileSync(`./engine-private/deploy/${deployGroupId}`, deployList, 'utf8');
       const totalPods = deployList.split(',').length * versions.split(',').length * parseInt(replicas);
       const limitFactor = 0.8;
       const reserveFactor = 0.05;
-      const resources = UnderpostCluster.API.getResourcesCapacity(kubeadm);
+      const resources = UnderpostCluster.API.getResourcesCapacity(node);
       const memory = parseInt(resources.memory.value / totalPods);
       const cpu = parseInt(resources.cpu.value / totalPods);
       UnderpostRootEnv.API.set(
@@ -49,7 +49,7 @@ class UnderpostDeploy {
       const initEnvObj = dotenv.parse(fs.readFileSync(initEnvPath, 'utf8'));
       process.env.PORT = initEnvObj.PORT;
       process.env.NODE_ENV = env;
-      await Config.build(undefined, 'proxy', deployList);
+      await Config.build('proxy', deployList);
       return buildPortProxyRouter(env === 'development' ? 80 : 443, buildProxyRouter());
     },
     deploymentYamlServiceFactory({ deployId, env, port, deploymentVersions }) {
@@ -243,9 +243,11 @@ spec:
         versions: '',
         traffic: '',
         replicas: '',
+        node: '',
         restoreHosts: false,
         disableUpdateDeployment: false,
         infoTraffic: false,
+        etcHosts: false,
       },
     ) {
       if (options.infoUtil === true)
@@ -325,14 +327,10 @@ Password: <Your Key>
       }
       UnderpostDeploy.API.configMap(env);
       let renderHosts = '';
-      let concatHots = '';
-      const etcHost = (
-        concat,
-      ) => `127.0.0.1  ${concat} localhost localhost.localdomain localhost4 localhost4.localdomain4
-::1         localhost localhost.localdomain localhost6 localhost6.localdomain6`;
+      let etcHosts = [];
       if (options.restoreHosts === true) {
-        renderHosts = etcHost(concatHots);
-        fs.writeFileSync(`/etc/hosts`, renderHosts, 'utf8');
+        const factoryResult = UnderpostDeploy.API.etcHostFactory(etcHosts);
+        renderHosts = factoryResult.renderHosts;
         logger.info(renderHosts);
         return;
       }
@@ -361,7 +359,7 @@ Password: <Your Key>
         for (const host of Object.keys(confServer)) {
           shellExec(`sudo kubectl delete HTTPProxy ${host}`);
           if (env === 'production' && options.cert === true) shellExec(`sudo kubectl delete Certificate ${host}`);
-          if (!options.remove === true && env === 'development') concatHots += ` ${host}`;
+          if (!options.remove === true && env === 'development') etcHosts.push(host);
         }
 
         const manifestsPath =
@@ -376,24 +374,9 @@ Password: <Your Key>
             shellExec(`sudo kubectl apply -f ./${manifestsPath}/secret.yaml`);
         }
       }
-      switch (process.platform) {
-        case 'linux':
-          {
-            switch (env) {
-              case 'development':
-                renderHosts = etcHost(concatHots);
-                fs.writeFileSync(`/etc/hosts`, renderHosts, 'utf8');
-
-                break;
-
-              default:
-                break;
-            }
-          }
-          break;
-
-        default:
-          break;
+      if (options.etcHosts === true) {
+        const factoryResult = UnderpostDeploy.API.etcHostFactory(etcHosts);
+        renderHosts = factoryResult.renderHosts;
       }
       if (renderHosts)
         logger.info(
@@ -487,6 +470,15 @@ Password: <Your Key>
       );
       shellExec(`sudo kubectl apply -f ./engine-private/conf/${deployId}/build/${env}/proxy.yaml`);
     },
+    etcHostFactory(hosts = []) {
+      const renderHosts = `127.0.0.1         ${hosts.join(
+        ' ',
+      )} localhost localhost.localdomain localhost4 localhost4.localdomain4
+::1         localhost localhost.localdomain localhost6 localhost6.localdomain6`;
+
+      fs.writeFileSync(`/etc/hosts`, renderHosts, 'utf8');
+      return { renderHosts };
+    },
   };
 }
 

package/src/cli/fs.js

@@ -61,6 +61,7 @@ class UnderpostFileStorage {
             await UnderpostFileStorage.API.pull(_path, options);
           } else logger.warn(`Pull path already exists`, _path);
         }
+        shellExec(`cd ${path} && git init && git add . && git commit -m "Base pull state"`);
       } else {
         const files =
           options.git === true

package/src/cli/index.js

@@ -22,7 +22,8 @@ program.name('underpost').description(`underpost ci/cd cli ${Underpost.version}`
 // 'new' command: Create a new project
 program
   .command('new')
-  .argument('<app-name>', 'The name of the application to create.')
+  .argument('<app-name>', 'The name or deploy-id of the application to create.')
+  .option('--deploy-id', 'Crete deploy ID conf env files')
   .option('--dev', 'Sets the development cli context')
   .description('Initializes a new Underpost project with a predefined structure.')
   .action(Underpost.repo.new);
@@ -157,6 +158,7 @@ program
   .option('--expose', 'Exposes services matching the provided deployment ID list.')
   .option('--info-util', 'Displays useful `kubectl` utility management commands.')
   .option('--cert', 'Resets TLS/SSL certificate secrets for deployments.')
+  .option('--node <node>', 'Sets optional node for deployment operations.')
   .option(
     '--build-manifest',
     'Builds Kubernetes YAML manifests, including deployments, services, proxies, and secrets.',
@@ -167,6 +169,7 @@ program
   .option('--disable-update-deployment', 'Disables updates to deployments.')
   .option('--info-traffic', 'Retrieves traffic configuration from current resource deployments.')
   .option('--kubeadm', 'Enables the kubeadm context for deployment operations.')
+  .option('--etc-hosts', 'Enables the etc-hosts context for deployment operations.')
   .option('--restore-hosts', 'Restores default `/etc/hosts` entries.')
   .description('Manages application deployments, defaulting to deploying development pods.')
   .action(Underpost.deploy.callback);

package/src/cli/repository.js

@@ -5,6 +5,7 @@ import { actionInitLog, loggerFactory } from '../server/logger.js';
 import fs from 'fs-extra';
 import { getNpmRootPath } from '../server/conf.js';
 import UnderpostStartUp from '../server/start.js';
+import { Config } from '../server/conf.js';
 
 dotenv.config();
 
@@ -80,15 +81,16 @@ class UnderpostRepository {
       );
     },
 
-    new(repositoryName, options = { dev: false }) {
+    new(repositoryName, options = { dev: false, deployId: false }) {
       return new Promise(async (resolve, reject) => {
         try {
           await logger.setUpInfo();
+          actionInitLog();
           if (repositoryName === 'service')
             return resolve(
               await UnderpostStartUp.API.listenPortController(UnderpostStartUp.API.listenServerFactory(), ':'),
             );
-          else actionInitLog();
+          if (options.deployId === true) return Config.deployIdFactory(repositoryName);
           const npmRoot = getNpmRootPath();
           const underpostRoot = options?.dev === true ? '.' : `${npmRoot}/underpost`;
           const destFolder = `./${repositoryName}`;

package/src/cli/run.js

@@ -72,12 +72,19 @@ class UnderpostRun {
       const baseCommand = options.dev ? 'node bin' : 'underpost';
       shellExec(`${baseCommand} cluster${options.dev ? ' --dev' : ''} --reset`);
       shellExec(`${baseCommand} cluster${options.dev ? ' --dev' : ''}`);
+      const mongoHosts = ['mongodb-0.mongodb-service'];
       shellExec(
-        `${baseCommand} cluster${options.dev ? ' --dev' : ''} --mongodb --mongo-db-host ${'127.0.0.1'} --pull-image`,
+        `${baseCommand} cluster${options.dev ? ' --dev' : ''} --mongodb --mongo-db-host ${mongoHosts.join(
+          ',',
+        )} --pull-image`,
       );
       shellExec(`${baseCommand} cluster${options.dev ? ' --dev' : ''} --valkey --pull-image`);
       shellExec(`${baseCommand} deploy --expose mongo`, { async: true });
       shellExec(`${baseCommand} deploy --expose valkey`, { async: true });
+      {
+        const hostListenResult = UnderpostDeploy.API.etcHostFactory(mongoHosts);
+        logger.info(hostListenResult.renderHosts);
+      }
     },
     'ssh-cluster-info': (path, options = UnderpostRun.DEFAULT_OPTION) => {
       const { underpostRoot } = options;
@@ -141,6 +148,14 @@ class UnderpostRun {
       let [deployId, subConf] = path.split(',');
       shellExec(`npm run dev-api ${deployId} ${subConf}`);
     },
+    'router-sync': (path, options = UnderpostRun.DEFAULT_OPTION) => {
+      const baseCommand = options.dev || true ? 'node bin' : 'underpost';
+      const defaultPaht = ['dd', 'kind-control-plane'];
+      let [deployId, node] = path ? path.split(',') : defaultPaht;
+      deployId = deployId ?? defaultPaht[0];
+      node = node ?? defaultPaht[1];
+      shellExec(`${baseCommand} deploy --sync --node ${node} --build-manifest --info-router ${deployId} production`);
+    },
     monitor: (path, options = UnderpostRun.DEFAULT_OPTION) => {
       const pid = getTerminalPid();
       logger.info('monitor pid', pid);
@@ -298,7 +313,7 @@ class UnderpostRun {
 
       UnderpostDeploy.API.switchTraffic(deployId, env, targetTraffic);
 
-      shellExec(`sudo kubectl rollout restart deployment/${deployId}-${env}-${currentTraffic}`);
+      // shellExec(`sudo kubectl rollout restart deployment/${deployId}-${env}-${currentTraffic}`);
     },
     'tf-vae-test': async (path, options = UnderpostRun.DEFAULT_OPTION) => {
       const { underpostRoot } = options;

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

@@ -524,6 +524,12 @@ const CssCoreDark = {
         }
         .btn-input-extension:hover {
         }
+        .section-mp-border {
+          border: 2px solid #313131;
+          border-radius: 5px;
+          padding: 5px;
+          margin: 5px;
+        }
       </style>
       ${scrollBarDarkRender()} ${borderChar(1, 'black', ['.main-body-btn-container'])}
     `,
@@ -848,6 +854,12 @@ const CssCoreLight = {
         }
         .btn-input-extension:hover {
         }
+        .section-mp-border {
+          border: 2px solid #bbb;
+          border-radius: 5px;
+          padding: 5px;
+          margin: 5px;
+        }
       </style>
       ${scrollBarLightRender()} ${borderChar(1, 'white', ['.main-body-btn-container'])}
     `,

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

@@ -9,35 +9,26 @@ const FullScreen = {
     Responsive.Event['full-screen-settings'] = () => {
       let fullScreenMode = checkFullScreen();
       if ((fullScreenSwitch && !fullScreenMode) || (!fullScreenSwitch && fullScreenMode))
-        if (s('.fullscreen-toggle')) ToggleSwitch.Tokens[`fullscreen-toggle`].click();
+        if (s('.fullscreen')) ToggleSwitch.Tokens[`fullscreen`].click();
     };
-    setTimeout(
-      () => (s(`.toggle-form-container-fullscreen`).onclick = () => ToggleSwitch.Tokens[`fullscreen-toggle`].click()),
-    );
-    return html`<div class="in section-mp toggle-form-container toggle-form-container-fullscreen hover">
-      <div class="fl ">
-        <div class="in fll" style="width: 70%">
-          <div class="in"><i class="fa-solid fa-expand"></i> ${Translate.Render('fullscreen')}</div>
-        </div>
-        <div class="in fll" style="width: 30%">
-          ${await ToggleSwitch.Render({
-            id: 'fullscreen-toggle',
-            containerClass: 'inl',
-            disabledOnClick: true,
-            checked: fullScreenSwitch,
-            on: {
-              unchecked: () => {
-                fullScreenSwitch = false;
-                if (checkFullScreen()) fullScreenOut();
-              },
-              checked: () => {
-                fullScreenSwitch = true;
-                if (!checkFullScreen()) fullScreenIn();
-              },
-            },
-          })}
-        </div>
-      </div>
+    return html`<div class="in section-mp">
+      ${await ToggleSwitch.Render({
+        wrapper: true,
+        wrapperLabel: html`<i class="fa-solid fa-expand"></i> ${Translate.Render('fullscreen')}`,
+        id: 'fullscreen',
+        disabledOnClick: true,
+        checked: fullScreenSwitch,
+        on: {
+          unchecked: () => {
+            fullScreenSwitch = false;
+            if (checkFullScreen()) fullScreenOut();
+          },
+          checked: () => {
+            fullScreenSwitch = true;
+            if (!checkFullScreen()) fullScreenIn();
+          },
+        },
+      })}
     </div>`;
   },
 };

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

@@ -65,6 +65,7 @@ const Input = {
         type="${options?.type ? options.type : 'text'}"
         class="${options.inputClass ? options.inputClass : 'in wfa'} ${id}"
         ${options?.min !== undefined ? `min="${options.min}"` : ''}
+        ${options?.max !== undefined ? `max="${options.max}"` : ''}
         placeholder${options?.placeholder ? `="${options.placeholder}"` : ''}
         ${options?.value !== undefined ? `value="${options.value}"` : ''}
         ${options?.autocomplete ? `autocomplete="${options.autocomplete}"` : ''}

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

@@ -51,6 +51,7 @@ const Modal = {
       RouterInstance: {},
       disableTools: [],
       observer: false,
+      disableBoxShadow: false,
     },
   ) {
     if (options.heightBottomBar === undefined) options.heightBottomBar = 50;
@@ -89,6 +90,11 @@ const Modal = {
       onHome: {},
       homeModals: options.homeModals ? options.homeModals : [],
       query: options.query ? `${window.location.search}` : undefined,
+      getTop: () => window.innerHeight - (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar),
+      getHeight: () =>
+        window.innerHeight -
+        (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
+        (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar),
     };
 
     if (idModal !== 'main-body' && options.mode !== 'view') {
@@ -117,12 +123,7 @@ const Modal = {
 
           Responsive.Event[`view-${idModal}`] = () => {
             if (!this.Data[idModal]) return delete Responsive.Event[`view-${idModal}`];
-            if (this.Data[idModal].slideMenu)
-              s(`.${idModal}`).style.height = `${
-                window.innerHeight -
-                (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-              }px`;
+            if (this.Data[idModal].slideMenu) s(`.${idModal}`).style.height = `${this.Data[idModal].getHeight()}px`;
           };
           Responsive.Event[`view-${idModal}`]();
 
@@ -207,11 +208,7 @@ const Modal = {
             const { barConfig } = options;
             options.style = {
               position: 'absolute',
-              height: `${
-                window.innerHeight -
-                (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-              }px`,
+              height: `${Modal.Data[idModal].getHeight()}px`,
               width: `${slideMenuWidth}px`,
               // 'overflow-x': 'hidden',
               // overflow: 'visible', // required for tooltip
@@ -239,11 +236,7 @@ const Modal = {
                 if (this.Data[_idModal].slideMenu && this.Data[_idModal].slideMenu.id === idModal)
                   this.Data[_idModal].slideMenu.callBack();
               }
-              s(`.${idModal}`).style.height = `${
-                window.innerHeight -
-                (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-              }px`;
+              s(`.${idModal}`).style.height = `${Modal.Data[idModal].getHeight()}px`;
               if (s(`.main-body-top`)) {
                 if (Modal.mobileModal()) {
                   if (s(`.btn-menu-${idModal}`).classList.contains('hide') && collapseSlideMenuWidth !== slideMenuWidth)
@@ -753,9 +746,12 @@ const Modal = {
                 s(`.main-btn-${results[currentKeyBoardSearchBoxIndex].routerId}`).click();
                 Modal.removeModal(searchBoxHistoryId);
               };
-
+              let boxHistoryDelayRender = 0;
               const searchBoxHistoryOpen = async () => {
-                if (!s(`.${id}`)) {
+                if (boxHistoryDelayRender) return;
+                boxHistoryDelayRender = 1000;
+                setTimeout(() => (boxHistoryDelayRender = 0));
+                if (!s(`.${searchBoxHistoryId}`)) {
                   const { barConfig } = await Themes[Css.currentTheme]();
                   barConfig.buttons.maximize.disabled = true;
                   barConfig.buttons.minimize.disabled = true;
@@ -763,7 +759,7 @@ const Modal = {
                   barConfig.buttons.menu.disabled = true;
                   barConfig.buttons.close.disabled = false;
                   await Modal.Render({
-                    id,
+                    id: searchBoxHistoryId,
                     barConfig,
                     title: html`<div class="search-box-recent-title">
                         ${renderViewTitle({
@@ -964,6 +960,7 @@ const Modal = {
                   heightBottomBar: originHeightBottomBar,
                   barMode: options.barMode,
                   observer: true,
+                  disableBoxShadow: true,
                 });
                 const maxWidthInputSearchBox = 450;
                 const paddingInputSearchBox = 5;
@@ -985,12 +982,7 @@ const Modal = {
                   s(`.top-bar-search-box`).style.top = `${
                     (originHeightTopBar - s(`.top-bar-search-box`).clientHeight) / 2
                   }px`;
-                  if (this.Data[id].slideMenu)
-                    s(`.${id}`).style.height = `${
-                      window.innerHeight -
-                      (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                      (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-                    }px`;
+                  if (this.Data[id].slideMenu) s(`.${id}`).style.height = `${Modal.Data[id].getHeight()}px`;
                 };
                 Responsive.Event[`view-${id}`]();
                 Keyboard.instanceMultiPressKey({
@@ -1119,9 +1111,7 @@ const Modal = {
                     if (!this.Data[id] || !s(`.${id}`)) return delete Responsive.Event[`view-${id}`];
                     //  <div class="in fll right-offset-menu-bottom-bar" style="height: 100%"></div>
                     // s(`.right-offset-menu-bottom-bar`).style.width = `${window.innerWidth - slideMenuWidth}px`;
-                    s(`.${id}`).style.top = `${
-                      window.innerHeight - (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-                    }px`;
+                    s(`.${id}`).style.top = `${Modal.Data[id].getTop()}px`;
                   };
                   Responsive.Event[`view-${id}`]();
                 }
@@ -1293,11 +1283,7 @@ const Modal = {
                     s(`.main-body-btn-ui-close`).classList.contains('hide') &&
                     s(`.btn-restore-${id}`).style.display !== 'none'
                       ? `${window.innerHeight}px`
-                      : `${
-                          window.innerHeight -
-                          (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                          (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-                        }px`;
+                      : `${Modal.Data[id].getHeight()}px`;
 
                   if (
                     s(`.main-body-btn-ui-close`).classList.contains('hide') &&
@@ -1405,7 +1391,11 @@ const Modal = {
         }
       </style>
       ${renderStyleTag(`style-${idModal}`, `.${idModal}`, options)}
-      <div class="fix ${options && options.class ? options.class : ''} modal box-shadow ${idModal}">
+      <div
+        class="fix ${options && options.class ? options.class : ''} modal ${options.disableBoxShadow
+          ? ''
+          : 'box-shadow'} ${idModal}"
+      >
         <div class="abs modal-handle-${idModal}"></div>
         <div class="in modal-html-${idModal}">
           <div class="stq bar-default-modal bar-default-modal-${idModal}">
@@ -1918,11 +1908,7 @@ const Modal = {
             if (s(`.btn-restore-${idModal}`) && s(`.btn-restore-${idModal}`).style.display !== 'none') {
               s(`.${idModal}`).style.height = s(`.main-body-btn-ui-close`).classList.contains('hide')
                 ? `${window.innerHeight}px`
-                : `${
-                    window.innerHeight -
-                    (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                    (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-                  }px`;
+                : `${Modal.Data[idModal].getHeight()}px`;
             }
             s(`.${idModal}`).style.top = s(`.main-body-btn-ui-close`).classList.contains('hide')
               ? `0px`