cyberia 2.8.885

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

@@ -0,0 +1,44 @@
+import { connectedScatterplotChart } from '../chart/connectedScatterplotChart.js';
+
+// https://takanori-fujiwara.github.io/d3-gallery-javascript/
+
+const D3Chart = {
+  Render: async function () {
+    setTimeout(async () => {
+      const driving = await d3.csv('/data/driving.csv', d3.autoType);
+
+      const button = d3.select('.chart-panel').append('div').append('button').attr('type', 'button').text('Replay');
+
+      const play = () => {
+        const chart = connectedScatterplotChart(driving, {
+          svgId: 'connected-scatterplot',
+          x: (d) => d.miles,
+          y: (d) => d.gas,
+          title: (d) => d.year,
+          orient: (d) => d.side,
+          yFormat: '.2f',
+          xLabel: 'Miles driven (per capita per year) →',
+          yLabel: '↑ Price of gas (per gallon, adjusted average $)',
+          width: 1000,
+          height: 720,
+          duration: 5000, // for the intro animation; 0 to disable
+        });
+        d3.select('#connected-scatterplot').remove();
+        d3.select('.chart-container').append(() => chart);
+      };
+
+      play();
+
+      // replay
+      button.on('click', () => {
+        play();
+      });
+    });
+    return html`
+      <div class="in chart-container"></div>
+      <div class="in chart-panel"></div>
+    `;
+  },
+};
+
+export { D3Chart };

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

@@ -0,0 +1,376 @@
+import { Badge } from './Badge.js';
+import { BtnIcon } from './BtnIcon.js';
+import { Css, renderCssAttr, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
+import { buildBadgeToolTipMenuOption, Modal, renderViewTitle } from './Modal.js';
+import { listenQueryPathInstance, setQueryPath, closeModalRouteChangeEvent, getProxyPath } from './Router.js';
+import { htmls, s } from './VanillaJs.js';
+
+// https://mintlify.com/docs/quickstart
+
+const Docs = {
+  RenderModal: async function (type) {
+    const docData = this.Data.find((d) => d.type === type);
+    const ModalId = `modal-docs-${docData.type}`;
+    const { barConfig } = await Themes[Css.currentTheme]();
+
+    await Modal.Render({
+      barConfig,
+      title: renderViewTitle(docData),
+      id: ModalId,
+      html: async () => {
+        if (docData.renderHtml) return await docData.renderHtml();
+        return html`
+          <iframe
+            class="in iframe-${ModalId}"
+            style="width: 100%; border: none; background: white"
+            src="${docData.url()}"
+          >
+          </iframe>
+        `;
+      },
+      maximize: true,
+      mode: 'view',
+      route: 'docs',
+      slideMenu: 'modal-menu',
+      observer: true,
+      barMode: 'top-bottom-bar',
+      query: true,
+      RouterInstance: Modal.Data['modal-docs'].options.RouterInstance,
+    });
+    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] = () => {
+      closeModalRouteChangeEvent({ closedId: ModalId });
+    };
+  },
+  Data: [
+    {
+      type: 'repo',
+      icon: html`<i class="fab fa-github"></i>`,
+      text: `Last Release`,
+      url: function () {
+        return `https://github.com/underpostnet/pwa-microservices-template-ghpkg/`;
+      },
+    },
+    {
+      type: 'demo',
+      icon: html`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
+        <path fill="currentColor" d="M20 2v12l10-6z" />
+        <path
+          fill="currentColor"
+          d="M28 14v8H4V6h10V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-8zM18 28h-4v-4h4z"
+        />
+      </svg>`,
+      text: html`Demo`,
+      url: function () {
+        return `https://underpostnet.github.io/pwa-microservices-template-ghpkg/`;
+      },
+    },
+    {
+      type: 'src',
+      icon: html`<i class="fa-brands fa-osi"></i>`,
+      text: 'Source Docs',
+      url: function () {
+        return `${getProxyPath()}docs/engine/${window.renderPayload.version.replace('v', '')}`;
+      },
+    },
+    {
+      type: 'api',
+      icon: html`<i class="fa-solid fa-arrows-turn-to-dots"></i>`,
+      text: `Api Docs`,
+      url: function () {
+        return `${getProxyPath()}api-docs`;
+      },
+    },
+    {
+      type: 'coverage',
+      icon: html`<img height="20" width="20" class="doc-icon-coverage" />`,
+      text: `Coverage report`,
+      url: function () {
+        return `${getProxyPath()}docs/coverage`;
+      },
+      themeEvent: () => {
+        if (s(`.doc-icon-coverage`)) setTimeout(() => simpleIconsRender(`.doc-icon-coverage`));
+      },
+    },
+    {
+      type: 'coverage-link',
+      icon: html`<img height="20" width="20" class="doc-icon-coverage-link" />`,
+      text: `Coverage`,
+      url: function () {
+        return `https://coveralls.io/github/underpostnet/engine`;
+      },
+      themeEvent: () => {
+        if (s(`.doc-icon-coverage-link`)) setTimeout(() => simpleIconsRender(`.doc-icon-coverage-link`));
+      },
+    },
+  ],
+  Tokens: {},
+  Init: async function (options) {
+    const { idModal } = options;
+    this.Tokens[idModal] = options;
+    setTimeout(() => {
+      s(`.btn-docs-src`).onclick = async () => {
+        setQueryPath({ path: 'docs', queryPath: 'src' });
+        await this.RenderModal('src');
+      };
+      s(`.btn-docs-api`).onclick = async () => {
+        setQueryPath({ path: 'docs', queryPath: 'api' });
+        await this.RenderModal('api');
+      };
+      s(`.btn-docs-coverage`).onclick = async () => {
+        setQueryPath({ path: 'docs', queryPath: 'coverage' });
+        await this.RenderModal('coverage');
+      };
+
+      s(`.btn-docs-coverage-link`).onclick = () => {
+        const docData = this.Data.find((d) => d.type === 'coverage-link');
+        location.href = docData.url();
+      };
+      s(`.btn-docs-repo`).onclick = () => {
+        const docData = this.Data.find((d) => d.type === 'repo');
+        location.href = docData.url();
+      };
+      s(`.btn-docs-demo`).onclick = () => {
+        const docData = this.Data.find((d) => d.type === 'demo');
+        location.href = docData.url();
+      };
+
+      listenQueryPathInstance({
+        id: options.idModal,
+        routeId: 'docs',
+        event: (path) => {
+          if (s(`.btn-docs-${path}`)) s(`.btn-docs-${path}`).click();
+          if (Modal.mobileModal()) {
+            setTimeout(() => {
+              s(`.btn-close-modal-menu`).click();
+            });
+          }
+        },
+      });
+    });
+    let docMenuRender = '';
+    for (const docData of this.Data) {
+      if (docData.themeEvent) {
+        ThemeEvents[`doc-icon-${docData.type}`] = docData.themeEvent;
+        setTimeout(ThemeEvents[`doc-icon-${docData.type}`]);
+      }
+      let tabHref, style, labelStyle;
+      switch (docData.type) {
+        case 'repo':
+        case 'coverage-link':
+          style = renderCssAttr({ style: { height: '45px' } });
+          labelStyle = renderCssAttr({ style: { top: '8px', left: '9px' } });
+          break;
+
+        default:
+          break;
+      }
+      tabHref = docData.url();
+      docMenuRender += html`
+        ${await BtnIcon.Render({
+          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,
+          tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption(docData.text, 'right')),
+          useMenuBtn: true,
+        })}
+      `;
+    }
+    // s(`.menu-btn-container-children`).classList.remove('hide');
+    // htmls(`.nav-path-display-${'modal-menu'}`, location.pathname);
+
+    htmls('.menu-btn-container-children-docs', docMenuRender);
+
+    {
+      const docsData = [
+        {
+          id: 'getting-started',
+          icon: 'rocket',
+          title: 'Getting Started',
+          description: 'Learn the basics and get started with our platform',
+        },
+        {
+          id: 'api-docs',
+          icon: 'code',
+          title: 'API Reference',
+          description: 'Detailed documentation of our API endpoints',
+        },
+        {
+          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',
+        },
+      ];
+
+      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>
+
+        <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>
+      `;
+    }
+  },
+};
+
+export { Docs };

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

@@ -0,0 +1,223 @@
+import { getId, newInstance } from './CommonJs.js';
+import { Input } from './Input.js';
+import { ToggleSwitch } from './ToggleSwitch.js';
+import { Translate } from './Translate.js';
+import { s, htmls } from './VanillaJs.js';
+
+const DropDown = {
+  Tokens: {},
+  Render: async function (options) {
+    const id = options.id ? options.id : getId(this.Tokens, 'dropdown-');
+    this.Tokens[id] = {
+      onClickEvents: {},
+      lastSelectValue: undefined,
+      oncheckvalues: {},
+      originData: options.data ? newInstance(options.data) : [],
+    };
+
+    options.data.push({
+      value: 'reset',
+      display: html`<i class="fa-solid fa-broom"></i> ${Translate.Render('clear')}`,
+      onClick: () => {
+        console.log('DropDown onClick', this.value);
+        if (options && options.resetOnClick) options.resetOnClick();
+        if (options && options.type === 'checkbox')
+          for (const opt of DropDown.Tokens[id].value) {
+            s(`.dropdown-option-${id}-${opt}`).click();
+          }
+        else this.Tokens[id].value = undefined;
+      },
+    });
+
+    if (!(options && options.disableClose))
+      options.data.push({
+        value: 'close',
+        display: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,
+        onClick: function () {
+          console.log('DropDown onClick', this.value);
+        },
+      });
+
+    const switchOptionsPanel = () => {
+      if (Array.from(s(`.dropdown-option-${id}`).classList).includes('hide'))
+        s(`.dropdown-option-${id}`).classList.remove('hide');
+      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) => {
+          const indexValue = options.data.findIndex((t) => optionData.checked && t.value === optionData.value);
+          if (indexValue > -1) setTimeout(() => s(`.dropdown-option-${id}-${indexValue}`).click());
+        });
+      else {
+        const indexValue = options.data.findIndex((t) => t.value === options.value);
+        if (indexValue > -1) setTimeout(() => s(`.dropdown-option-${id}-${indexValue}`).click());
+      }
+
+      s(`.dropdown-label-${id}`).onclick = switchOptionsPanel;
+      s(`.dropdown-current-${id}`).onclick = switchOptionsPanel;
+      if (options && options.open) switchOptionsPanel();
+
+      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 (
+            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;
+    });
+
+    const { render, index } = await _render(options.data);
+
+    return html`
+      <div class="inl dropdown-container ${id} ${options?.containerClass ? options.containerClass : ''}">
+        <div class="in dropdown-option dropdown-label-${id} ${options && options.disableSelectLabel ? 'hide' : ''}">
+          <i class="fa-solid fa-caret-down"> </i> ${options.label}
+        </div>
+        <div
+          class="in dropdown-option dropdown-current-${id} ${options && options.disableSelectOptionsLabel
+            ? 'hide'
+            : ''}"
+        ></div>
+        <div class="in dropdown-option-${id} hide">
+          <div class="in dropdown-option ${options && options.disableSearchBox ? 'hide' : ''}">
+            ${await Input.Render({
+              id: `search-box-${id}`,
+              label: html`<i class="fa-solid fa-magnifying-glass"></i> ${Translate.Render('search')}`,
+              containerClass: 'in',
+              placeholder: true,
+            })}
+          </div>
+          <div class="${id}-render-container">${render}</div>
+        </div>
+      </div>
+    `;
+  },
+};
+
+export { DropDown };