underpost 2.8.84 → 2.8.85

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

@@ -8,7 +8,12 @@ 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: {},
+      originData: options.data ? newInstance(options.data) : [],
+    };
 
     options.data.push({
       value: 'reset',
@@ -39,6 +44,100 @@ 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') {
+                if (options.type === 'checkbox') {
+                  // const _instanValue = data
+                  //   .filter((d) => d.checked)
+                  //   .map((v, i, a) => `${v.display}${i < a.length - 1 ? ',' : ''}`)
+                  //   .join('');
+                  const value = Object.keys(DropDown.Tokens[id].oncheckvalues);
+                  htmls(
+                    `.dropdown-current-${id}`,
+                    value.map((v) => DropDown.Tokens[id].originData.find((_v) => _v.value === v).display),
+                  );
+                } else {
+                  htmls(`.dropdown-current-${id}`, 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 +152,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 +213,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 };

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

@@ -1,7 +1,7 @@
 import { CoreService } from '../../services/core/core.service.js';
 import { BtnIcon } from './BtnIcon.js';
 import { s4 } from './CommonJs.js';
-import { darkTheme, renderCssAttr } from './Css.js';
+import { darkTheme, renderCssAttr, subThemeManager } from './Css.js';
 import { loggerFactory } from './Logger.js';
 import { append, getAllChildNodes, getProxyPath, htmls, s, sa } from './VanillaJs.js';
 
@@ -23,12 +23,12 @@ const LoadingAnimation = {
           <div
             class="fix progress-bar box-shadow ${id}"
             style="left: -100%; background: ${darkTheme
-              ? LoadingAnimation.darkColor
-                ? LoadingAnimation.darkColor
-                : `#c9c9c9`
-              : LoadingAnimation.lightColor
-              ? LoadingAnimation.lightColor
-              : `#515151`};"
+              ? subThemeManager.darkColor
+                ? subThemeManager.darkColor
+                : `#66e400`
+              : subThemeManager.lightColor
+              ? subThemeManager.lightColor
+              : `#157e00`};"
           ></div>
         `,
       );
@@ -140,14 +140,7 @@ const LoadingAnimation = {
         }, 300);
       });
   },
-  lightColor: null,
-  setLightColor: function (color) {
-    this.lightColor = color;
-  },
-  darkColor: null,
-  setDarkColor: function (color) {
-    this.darkColor = color;
-  },
+
   RenderCurrentSrcLoad: function (event) {
     if (s(`.ssr-loading-info`)) {
       let nameSrcLoad = event.data.path;