underpost 2.8.878 → 2.8.882

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

@@ -1,12 +1,9 @@
 import { Badge } from './Badge.js';
 import { BtnIcon } from './BtnIcon.js';
 import { Css, renderCssAttr, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
-import { DropDown } from './DropDown.js';
-import { buildBadgeToolTipMenuOption, Modal, renderMenuLabel, renderViewTitle } from './Modal.js';
+import { buildBadgeToolTipMenuOption, Modal, renderViewTitle } from './Modal.js';
 import { listenQueryPathInstance, setQueryPath, closeModalRouteChangeEvent, getProxyPath } from './Router.js';
-import { Translate } from './Translate.js';
 import { htmls, s } from './VanillaJs.js';
-import Sortable from 'sortablejs';
 
 // https://mintlify.com/docs/quickstart
 
@@ -129,19 +126,16 @@ const Docs = {
       s(`.btn-docs-src`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'src' });
         cleanActive();
-        s(`.btn-docs-src`).classList.add('main-btn-menu-active');
         await this.RenderModal('src', options.modalOptions);
       };
       s(`.btn-docs-api`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'api' });
         cleanActive();
-        s(`.btn-docs-api`).classList.add('main-btn-menu-active');
         await this.RenderModal('api', options.modalOptions);
       };
       s(`.btn-docs-coverage`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'coverage' });
         cleanActive();
-        s(`.btn-docs-coverage`).classList.add('main-btn-menu-active');
         await this.RenderModal('coverage', options.modalOptions);
       };
 
@@ -162,7 +156,13 @@ const Docs = {
         id: options.idModal,
         routeId: 'docs',
         event: (path) => {
+          Modal.subMenuBtnClass['docs'].open = !Modal.subMenuBtnClass['docs'].open;
           if (s(`.btn-docs-${path}`)) s(`.btn-docs-${path}`).click();
+          if (Modal.mobileModal()) {
+            setTimeout(() => {
+              s(`.btn-close-modal-menu`).click();
+            });
+          }
         },
       });
     });
@@ -186,98 +186,199 @@ const Docs = {
       tabHref = docData.url();
       docMenuRender += html`
         ${await BtnIcon.Render({
-          class: `in wfa main-btn-menu btn-docs-${docData.type}`,
-          label: html`<span class="menu-btn-icon">${docData.icon}</span
-            ><span class="menu-label-text"> ${docData.text} </span>`,
+          class: `in wfa main-btn-menu submenu-btn btn-docs btn-docs-${docData.type}`,
+          label: html`<span class="inl menu-btn-icon">${docData.icon}</span
+            ><span class="menu-label-text menu-label-text-docs"> ${docData.text} </span>`,
           tabHref,
-          handleContainerClass: 'handle-btn-container',
           tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption(docData.text, 'right')),
-          attrs: `data-id="${docData.type}"`,
-          handleContainerClass: 'handle-btn-container',
+          useMenuBtn: true,
         })}
       `;
     }
+    // s(`.menu-btn-container-children`).classList.remove('hide');
+    // htmls(`.nav-path-display-${'modal-menu'}`, location.pathname);
 
-    htmls('.menu-btn-container-children', html` <div class="fl menu-btn-container-docs">${docMenuRender}</div>`);
-    if (s(`.menu-btn-container-main`)) s(`.menu-btn-container-main`).classList.add('hide');
-    htmls(`.nav-path-display-${'modal-menu'}`, location.pathname);
+    htmls('.menu-btn-container-children-docs', docMenuRender);
 
-    this.Tokens[idModal] = new Sortable(s(`.menu-btn-container-docs`), {
-      animation: 150,
-      group: `docs-sortable`,
-      forceFallback: true,
-      fallbackOnBody: true,
-      handle: '.handle-btn-container',
-      store: {
-        /**
-         * Get the order of elements. Called once during initialization.
-         * @param   {Sortable}  sortable
-         * @returns {Array}
-         */
-        get: function (sortable) {
-          const order = localStorage.getItem(sortable.options.group.name);
-          return order ? order.split('|') : [];
+    {
+      const docsData = [
+        {
+          id: 'getting-started',
+          icon: 'rocket',
+          title: 'Getting Started',
+          description: 'Learn the basics and get started with our platform',
         },
-
-        /**
-         * Save the order of elements. Called onEnd (when the item is dropped).
-         * @param {Sortable}  sortable
-         */
-        set: function (sortable) {
-          const order = sortable.toArray();
-          localStorage.setItem(sortable.options.group.name, order.join('|'));
+        {
+          id: 'api-docs',
+          icon: 'code',
+          title: 'API Reference',
+          description: 'Detailed documentation of our API endpoints',
         },
-      },
-      // chosenClass: 'css-class',
-      // ghostClass: 'css-class',
-      // Element dragging ended
-      onEnd: function (/**Event*/ evt) {
-        // console.log('Sortable onEnd', evt);
-        // console.log('evt.oldIndex', evt.oldIndex);
-        // console.log('evt.newIndex', evt.newIndex);
-        const slotId = Array.from(evt.item.classList).pop();
-        // console.log('slotId', slotId);
-        if (evt.oldIndex === evt.newIndex) s(`.${slotId}`).click();
+        {
+          id: 'guides',
+          icon: 'book',
+          title: 'Guides',
+          description: 'Step-by-step tutorials and how-to guides',
+        },
+        {
+          id: 'demo',
+          icon: 'laptop-code',
+          title: 'Demo',
+          description: 'Practical examples and code snippets',
+        },
+        {
+          id: 'faq',
+          icon: 'question-circle',
+          title: 'FAQ',
+          description: 'Frequently asked questions',
+        },
+        {
+          id: 'community',
+          icon: 'users',
+          title: 'Community',
+          description: 'Join our developer community',
+        },
+      ];
 
-        // var itemEl = evt.item; // dragged HTMLElement
-        // evt.to; // target list
-        // evt.from; // previous list
-        // evt.oldIndex; // element's old index within old parent
-        // evt.newIndex; // element's new index within new parent
-        // evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
-        // evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
-        // evt.clone; // the clone element
-        // evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
-      },
-    });
+      return html`
+        <style>
+          .docs-landing {
+            padding: 2rem;
+            max-width: 1200px;
+            margin: 0 auto;
+            height: 100%;
+            box-sizing: border-box;
+          }
+          .docs-header {
+            text-align: center;
+            margin-bottom: 3rem;
+            opacity: 0;
+            animation: fadeInUp 0.6s ease-out forwards;
+          }
+          .docs-header h1 {
+            font-size: 2.5rem;
+            margin: 0 0 1rem;
+            line-height: 1.2;
+          }
+          .docs-header p {
+            font-size: 1.2rem;
+            max-width: 700px;
+            margin: 0 auto 2rem;
+            line-height: 1.6;
+          }
+          .docs-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 1.5rem;
+            margin: 0;
+            padding: 0;
+            list-style: none;
+          }
+          .docs-card-container {
+            cursor: pointer;
+            opacity: 0;
+            margin-bottom: 3rem;
+            animation: fadeInUp 0.6s ease-out forwards;
+          }
+          .docs-card {
+            border-radius: 8px;
+            padding: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            position: relative;
+            transition: all 0.3s ease-in-out;
+          }
+
+          .card-icon {
+            font-size: 1.75rem;
+            width: 56px;
+            height: 56px;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 0 1.25rem;
+            transition: transform 0.2s ease;
+          }
+
+          .card-content {
+            flex: 1;
+          }
+          .card-content h3 {
+            margin: 0 0 0.5rem;
+            font-size: 1.25rem;
+            font-weight: 600;
+          }
+          .card-content p {
+            margin: 0;
+            font-size: 0.95rem;
+            transition: color 0.3s ease;
+          }
+        </style>
+
+        <style>
+          ${docsData
+            .map(
+              (_, index) => css`
+                .docs-card-container:nth-child(${index + 1}) {
+                  animation-delay: ${0.1 * (index + 1)}s;
+                }
+              `,
+            )
+            .join('')}
+        </style>
 
-    return '';
-    return html` <div class="in section-mp">${docMenuRender}</div>`;
-    return html` <div class="in section-mp">
-      ${await DropDown.Render({
-        id: 'dropdown-docs',
-        disableClose: true,
-        disableSelectLabel: true,
-        disableSelectOptionsLabel: true,
-        disableSearchBox: true,
-        open: true,
-        lastSelectClass: 'hover-active',
-        label: renderMenuLabel({
-          icon: html`<i class="fas fa-book"></i>`,
-          text: html`${Translate.Render('docs')}`,
-        }),
-        containerClass: '',
-        data: this.Data.map((docTypeData) => {
-          return {
-            display: docTypeData.label,
-            value: docTypeData.type,
-            onClick: async () => {
-              console.warn(this.viewUrl[docTypeData.type]());
-            },
-          };
-        }),
-      })}
-    </div>`;
+        <div class="docs-landing">
+          <div class="docs-header">
+            <h1>Documentation</h1>
+            <p>
+              Find everything you need to build amazing applications with our platform. Get started with our guides, API
+              reference, and examples.
+            </p>
+            <!--
+                    <div class="search-bar">
+                      <i class="fas fa-search"></i>
+                      <input type="text" placeholder="Search documentation..." id="docs-search">
+                    </div>
+                    -->
+          </div>
+
+          <ul class="docs-grid">
+            ${docsData
+              .map((item) => {
+                setTimeout(() => {
+                  if (s(`.docs-card-container-${item.id}`)) {
+                    s(`.docs-card-container-${item.id}`).onclick = () => {
+                      if (item.id.match('demo')) {
+                        location.href = 'https://underpostnet.github.io/pwa-microservices-template-ghpkg/';
+                      } else if (item.id.match('api')) {
+                        if (s(`.btn-docs-api`)) s(`.btn-docs-api`).click();
+                      } else {
+                        if (s(`.btn-docs-src`)) s(`.btn-docs-src`).click();
+                      }
+                    };
+                  }
+                });
+                return html`
+                  <div class="in docs-card-container docs-card-container-${item.id}">
+                    <li class="docs-card">
+                      <div class="card-icon">
+                        <i class="fas fa-${item.icon}"></i>
+                      </div>
+                      <div class="card-content">
+                        <h3>${item.title}</h3>
+                        <p>${item.description}</p>
+                      </div>
+                    </li>
+                  </div>
+                `;
+              })
+              .join('')}
+          </ul>
+        </div>
+      `;
+    }
   },
 };
 

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

@@ -7,7 +7,7 @@ import { loggerFactory } from './Logger.js';
 import { RichText } from './RichText.js';
 import { ToggleSwitch } from './ToggleSwitch.js';
 import { Translate } from './Translate.js';
-import { htmls, s } from './VanillaJs.js';
+import { htmls, htmlStrSanitize, s } from './VanillaJs.js';
 const logger = loggerFactory(import.meta);
 
 const fileFormDataFactory = (e, extensions) => {
@@ -61,22 +61,27 @@ const Input = {
         };
     });
 
-    const inputElement = html` <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}"` : ''}
-        ${options?.disabled ? `disabled` : ''}
-        ${options?.name !== undefined ? `name="${options.name}"` : ''}
-        ${options?.pattern !== undefined ? `pattern="${options.pattern}"` : ''}
-        ${options?.pattern === undefined && options.type === 'tel' ? `pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"` : ''}
-        ${options?.required ? ` required ` : ''}
-        ${options?.accept ? `accept="${options.accept}"` : ''}
-        ${options?.multiple ? `multiple="multiple"` : ''}
-      />
+    const labelValue = htmlStrSanitize(options.label) ? htmlStrSanitize(options.label) : id;
+
+    const inputElement = html` <label for="${id}-name">
+        <span class="hide">${labelValue}</span>
+        <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}"` : ''}
+          ${options?.disabled ? `disabled` : ''}
+          ${options?.name !== undefined ? `name="${options.name}"` : `name='${id}-name'`}
+          ${options?.pattern !== undefined ? `pattern="${options.pattern}"` : ''}
+          ${options?.pattern === undefined && options.type === 'tel' ? `pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"` : ''}
+          ${options?.required ? ` required ` : ''}
+          ${options?.accept ? `accept="${options.accept}"` : ''}
+          ${options?.multiple ? `multiple="multiple"` : ''}
+          id="${id}-name"
+      /></label>
       <div class="${id}-input-extension input-info input-extension ${options?.extension ? '' : 'hide'}">
         ${options?.extension ? await options.extension() : ''}
       </div>`;
@@ -244,7 +249,12 @@ const Input = {
 };
 
 const InputFile = {
-  Render: async function ({ id, multiple }, on = { change: () => {}, clear: () => {} }) {
+  Render: async function (
+    options = { id: '', multiple: false, extensionsAccept: [] },
+    on = { change: () => {}, clear: () => {} },
+  ) {
+    let { id, multiple, extensionsAccept } = options;
+    if (!extensionsAccept) extensionsAccept = [];
     // drag drop multi file
     const gridId = `ag-grid-input-file-${id}`;
     setTimeout(() => {
@@ -322,7 +332,12 @@ const InputFile = {
     return html` <div class="fl">
       <div class="in fll input-file-col">
         <div class="in section-mp input-file-sub-col">
-          <input class="wfa ${id}" type="file" ${multiple ? `multiple="multiple"` : ''} />
+          <input
+            class="wfa ${id}"
+            type="file"
+            ${multiple ? `multiple="multiple"` : ''}
+            ${extensionsAccept.length > 0 ? `accept="${extensionsAccept.join(', ')}"` : ''}
+          />
           <div class="in">
             ${await BtnIcon.Render({
               class: `wfa btn-clear-input-file-${id}`,

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

@@ -129,16 +129,11 @@ const LoadingAnimation = {
   removeSplashScreen: function (backgroundContainer, callBack) {
     if (s(`.clean-cache-container`)) s(`.clean-cache-container`).style.display = 'none';
     if (!backgroundContainer) backgroundContainer = '.ssr-background';
-    if (s(backgroundContainer))
-      setTimeout(() => {
-        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);
-      });
+    if (s(backgroundContainer)) {
+      s(backgroundContainer).style.display = 'none';
+      if (s(`.main-body-btn-container`)) s(`.main-body-btn-container`).classList.remove('hide');
+      if (callBack) callBack();
+    }
   },
 
   RenderCurrentSrcLoad: function (event) {