lupine.components 1.0.17 → 1.0.19

package/src/components/popup-menu.tsx

@@ -1,11 +1,14 @@
 import { CssProps, RefProps, VNode } from 'lupine.web';
 import { stopPropagation } from '../lib';
 
-export type PopupMenuOpenMenuProps = { handle?: Function };
+export type PopupMenuHookProps = {
+  openMenu?: (event?: MouseEvent) => void;
+  getValue?: () => string;
+};
 
 // defaultValue=<i class='ifc-icon co-cil-hamburger-menu'></i>
 export const PopupMenuWithIcon = (props: PopupMenuProps) => {
-  const handle: PopupMenuOpenMenuProps = {};
+  const hook: PopupMenuHookProps = {};
   const css: CssProps = {
     cursor: 'pointer',
     display: 'flex',
@@ -16,7 +19,7 @@ export const PopupMenuWithIcon = (props: PopupMenuProps) => {
   return (
     <div
       onClick={() => {
-        handle.handle && handle.handle();
+        hook.openMenu && hook.openMenu();
       }}
       css={css}
     >
@@ -30,8 +33,8 @@ export const PopupMenuWithIcon = (props: PopupMenuProps) => {
         handleSelected={props.handleSelected}
         handleOpened={props.handleOpened}
         handleClosed={props.handleClosed}
-        noUpdateValue={props.noUpdateValue}
-        refOpenMenu={handle}
+        noUpdateLabel={props.noUpdateLabel}
+        hook={hook}
         noTriangleIcon={props.noTriangleIcon}
       ></PopupMenu>
     </div>
@@ -40,7 +43,7 @@ export const PopupMenuWithIcon = (props: PopupMenuProps) => {
 
 export type PopupMenuProps = {
   list: string[];
-  defaultValue: string | VNode<any>;
+  defaultValue: string;
   tips?: string;
   minWidth?: string;
   maxWidth?: string;
@@ -48,8 +51,8 @@ export type PopupMenuProps = {
   handleSelected?: Function;
   handleOpened?: Function;
   handleClosed?: Function;
-  noUpdateValue?: boolean;
-  refOpenMenu?: PopupMenuOpenMenuProps;
+  noUpdateLabel?: boolean;
+  hook?: PopupMenuHookProps;
   noTriangleIcon?: boolean;
   align?: 'left' | 'right';
 };
@@ -57,12 +60,12 @@ export type PopupMenuProps = {
 export type PopupMenuWithButtonProps = { label: string } & PopupMenuProps;
 
 export const PopupMenuWithButton = (props: PopupMenuWithButtonProps) => {
-  const handle: PopupMenuOpenMenuProps = {};
+  const hook: PopupMenuHookProps = {};
   return (
     <button
       class='button-base'
       onClick={() => {
-        handle.handle && handle.handle();
+        hook.openMenu && hook.openMenu();
       }}
       css={{ '>div': { float: 'right', textAlign: 'left' } }}
     >
@@ -77,8 +80,8 @@ export const PopupMenuWithButton = (props: PopupMenuWithButtonProps) => {
         handleSelected={props.handleSelected}
         handleOpened={props.handleOpened}
         handleClosed={props.handleClosed}
-        noUpdateValue={props.noUpdateValue}
-        refOpenMenu={handle}
+        noUpdateLabel={props.noUpdateLabel}
+        hook={hook}
         noTriangleIcon={props.noTriangleIcon}
         align={props.align}
       ></PopupMenu>
@@ -89,11 +92,11 @@ export const PopupMenuWithButton = (props: PopupMenuWithButtonProps) => {
 export type PopupMenuWithLabelProps = { label: string } & PopupMenuProps;
 
 export const PopupMenuWithLabel = (props: PopupMenuWithLabelProps) => {
-  const handle: PopupMenuOpenMenuProps = {};
+  const hook: PopupMenuHookProps = {};
   return (
     <div
       onClick={() => {
-        handle.handle && handle.handle();
+        hook.openMenu && hook.openMenu();
       }}
       css={{ cursor: 'pointer', '>div': { float: 'right', textAlign: 'left' } }}
     >
@@ -108,8 +111,8 @@ export const PopupMenuWithLabel = (props: PopupMenuWithLabelProps) => {
         handleSelected={props.handleSelected}
         handleOpened={props.handleOpened}
         handleClosed={props.handleClosed}
-        noUpdateValue={props.noUpdateValue}
-        refOpenMenu={handle}
+        noUpdateLabel={props.noUpdateLabel}
+        hook={hook}
         noTriangleIcon={props.noTriangleIcon}
         align={props.align}
       ></PopupMenu>
@@ -127,12 +130,12 @@ export const PopupMenu = ({
   handleSelected,
   handleOpened,
   handleClosed,
-  noUpdateValue,
-  refOpenMenu,
+  noUpdateLabel,
+  hook,
   align = 'right',
   noTriangleIcon,
 }: PopupMenuProps) => {
-  const css: any = {
+  const css: CssProps = {
     '.popup-menu-item': {
       padding: '0 0 1px 0',
       display: 'inline-block',
@@ -209,7 +212,8 @@ export const PopupMenu = ({
 
   let ref: RefProps = { id: '' };
   let isShowing = false;
-  const handleClick = (event: any) => {
+  let selectedValue = defaultValue;
+  const openMenu = (event?: MouseEvent) => {
     stopPropagation(event);
 
     handleOpened && handleOpened();
@@ -224,8 +228,9 @@ export const PopupMenu = ({
     listDom.classList.toggle('open', isShowing);
     ref.$('.popup-menu-list .menu-focus').focus();
   };
-  if (refOpenMenu) {
-    refOpenMenu.handle = handleClick;
+  if (hook) {
+    hook.openMenu = openMenu;
+    hook.getValue = () => selectedValue;
   }
   const itemClick = (event: any) => {
     stopPropagation(event);
@@ -234,7 +239,8 @@ export const PopupMenu = ({
     isShowing = false;
     ref.$('.popup-menu-list').classList.remove('open');
     if (event.target) {
-      if (noUpdateValue !== true) {
+      selectedValue = event.target.innerText;
+      if (noUpdateLabel !== true) {
         ref.$('.popup-menu-item .popup-menu-text').innerText = event.target.innerText;
       }
       if (handleSelected) {
@@ -252,7 +258,7 @@ export const PopupMenu = ({
   };
 
   return (
-    <div ref={ref} css={css} onClick={handleClick} title={tips}>
+    <div ref={ref} css={css} onClick={openMenu} title={tips}>
       <div class='popup-menu-item'>
         <span class={'popup-menu-text' + (noTriangleIcon !== true ? ' triangle-icon' : '')}>
           {defaultValue || '&nbsp;'}

package/src/components/progress.tsx

@@ -1,4 +1,4 @@
-import { RefProps } from 'lupine.web';
+import { CssProps, RefProps } from 'lupine.web';
 import { HtmlVar } from './html-var';
 
 export type ProgressHookProps = {
@@ -10,7 +10,7 @@ export type ProgressProps = {
 };
 
 export const Progress = (props: ProgressProps) => {
-  const css: any = {
+  const css: CssProps = {
     position: 'fixed',
     display: 'flex',
     bottom: '0',

package/src/frames/index.ts

@@ -1,5 +1,3 @@
-export * from './desktop-frame';
-export * from './header-with-back-frame';
 export * from './responsive-frame';
 export * from './top-frame';
 export * from './slider-frame';

package/src/frames/responsive-frame.tsx

@@ -1,15 +1,26 @@
-import { VNode, CssProps, MediaQueryRange } from 'lupine.components';
-import { MobileFooterMenu, MobileFooterMenuItemProps } from '../components/mobile-components/mobile-footer-menu';
+/* ResponsiveFrame for desktop and mobile
+sliderFrameHook is for slider frame from right or bottom used in side-menu
+*/
+
+import { VNode, CssProps, MediaQueryRange, SliderFrameHookProps, SliderFrame } from 'lupine.components';
+import { MobileFooterMenu } from '../components/mobile-components/mobile-footer-menu';
+import { DesktopFooter } from '../components/desktop-footer';
+import { DesktopHeader } from '../components/desktop-header';
 import { MobileHeaderComponent } from '../components/mobile-components/mobile-header-component';
+import { MobileSideMenu } from '../components/mobile-components/mobile-side-menu';
+import { IconMenuItemProps } from '../components/mobile-components/icon-menu-item-props';
 
-export const ResponsiveFrame = async (
-  placeholderClassname: string,
-  title: string,
-  footerTitle: string,
-  logoUrl: string,
-  vnode: VNode<any>,
-  bottomMenu: MobileFooterMenuItemProps[]
-) => {
+export interface ResponsiveFrameProps {
+  placeholderClassname: string;
+  mainContent: VNode<any>;
+  desktopHeaderTitle: string;
+  desktopFooterTitle: string;
+  desktopTopMenu: IconMenuItemProps[];
+  mobileBottomMenu: IconMenuItemProps[];
+  mobileSideMenuContent: VNode<any>;
+  sliderFrameHook: SliderFrameHookProps;
+}
+export const ResponsiveFrame = async (props: ResponsiveFrameProps) => {
   const cssContainer: CssProps = {
     display: 'flex',
     flexDirection: 'column',
@@ -20,22 +31,16 @@ export const ResponsiveFrame = async (
       display: 'flex',
       flexDirection: 'column',
       width: '100vw',
-      // height: '72px',
-      // position: 'fixed',
-      // left: 0,
-      // top: 0,
-      // zIndex: 'var(--layer-menu)',
       backgroundColor: 'var(--activatable-bg-color-normal)',
     },
     '.frame-content': {
       display: 'flex',
       flex: '1',
       flexDirection: 'column',
-      // paddingTop: '100px',
       overflowY: 'auto',
       scrollbarWidth: 'none',
       '&::-webkit-scrollbar': {
-        height: '0',
+        display: 'none',
       },
     },
     '.content-block': {
@@ -45,39 +50,32 @@ export const ResponsiveFrame = async (
       overflowY: 'auto',
       scrollbarWidth: 'none',
     },
+    '.content-block::-webkit-scrollbar': {
+      display: 'none',
+    },
     '.content-block .padding-block': {
       padding: '0 16px',
     },
-    // '.frame-footer': {
-    //   paddingTop: '57px', // 应该和底部菜单的高度一致
-    // },
     [MediaQueryRange.TabletBelow]: {
-      // .header-box,
       '.frame-footer .footer-box, .frame-top-menu .desktop-menu-box': {
         display: 'none',
       },
-      // '.content-block': {
-      //   paddingBottom: '16px',
-      // },
-      '.metronome-page-box, .gauge-box': {
-        boxShadow: '#313131 2.02px 2.02px 5.08px 1px !important',
-      },
     },
   };
 
   return (
     <div css={cssContainer} class='responsive-frame'>
+      <SliderFrame hook={props.sliderFrameHook} />
       <div class='frame-top-menu'>
-        {/* <DesktopTopMenu title={title}></DesktopTopMenu> */}
+        <DesktopHeader title={props.desktopHeaderTitle} items={props.desktopTopMenu}></DesktopHeader>
         <MobileHeaderComponent></MobileHeaderComponent>
       </div>
       <div class='frame-content'>
-        <div class={'content-block ' + placeholderClassname}>{vnode}</div>
+        <MobileSideMenu>{props.mobileSideMenuContent}</MobileSideMenu>
+        <div class={'content-block ' + props.placeholderClassname}>{props.mainContent}</div>
         <div class='frame-footer'>
-          <div class='footer-box'>
-            <div class='footer-cp'>{footerTitle}</div>
-          </div>
-          <MobileFooterMenu items={bottomMenu}></MobileFooterMenu>
+          <DesktopFooter title={props.desktopFooterTitle}></DesktopFooter>
+          <MobileFooterMenu items={props.mobileBottomMenu}></MobileFooterMenu>
         </div>
       </div>
     </div>

package/src/frames/slider-frame.tsx

@@ -1,7 +1,18 @@
-import { VNode, CssProps, RefProps } from 'lupine.web';
-import { stopPropagation } from '../lib';
-import { HtmlVar } from '../components';
-import { MediaQueryRange } from '../styles';
+/* frame component to show pages (sliders) from right or bottom
+  const sliderFrameHook: SliderFrameHookProps = {};
+  const onClick = (event: Event) => {
+    sliderFrameHook.load!(<... />);
+    or
+    sliderFrameHook.close!(event);
+  };
+  return (
+    <div onClick={onClick}>
+      <SliderFrame hook={sliderFrameHook} />
+      ...
+    </div>
+  );
+*/
+import { VNode, CssProps, HtmlVar, RefProps, stopPropagation, MediaQueryRange } from 'lupine.components';
 
 export type SliderFramePosition = 'desktop-slide-left' | 'desktop-slide-right';
 export type SliderFrameHookProps = {
@@ -69,20 +80,21 @@ export const SliderFrame = (props: SliderFrameProps) => {
     },
     '&.desktop-slide-right': {
       [MediaQueryRange.TabletAbove]: {
-        top: '56px',
+        top: '59px',
         left: '30%',
         transform: 'translateX(0)',
-        '.header-back-top': {
+        // notice: here is connected with mobile-header-title-icon.tsx
+        '.mobile-header-title-icon-top': {
           width: '100%',
           boxShadow: 'unset',
         },
         '.header-back-content': {
           width: '100%',
         },
-        '.header-back-title': {
+        '.mhti-title': {
           fontSize: '15px',
         },
-        '.header-back-left, .header-back-right': {
+        '.mhti-left, .mhti-right': {
           display: 'none',
         },
         '&.d-none': {

package/src/frames/top-frame.tsx

@@ -1,4 +1,7 @@
-import { VNode, CssProps } from 'lupine.web';
+/* most top-frame for all other pages
+place to set safe-area-inset-top and other common styles
+*/
+import { VNode, CssProps } from 'lupine.components';
 
 export const TopFrame = async (placeholderClassname: string, vnode: VNode<any>) => {
   const cssContainer: CssProps = {
@@ -18,7 +21,6 @@ export const TopFrame = async (placeholderClassname: string, vnode: VNode<any>)
     },
   };
 
-  // console.log('Web version: ', getWebVersion());
   return (
     <div css={cssContainer}>
       {/* Can't put css on this placeholder node! */}

package/src/lib/blob-utils.ts

@@ -0,0 +1,23 @@
+export const blobToBase64 = (blob: Blob): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string); // data:audio/mpeg;base64,...
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+};
+
+export const blobFromBase64 = (base64: string) => {
+  const [header, base64Data] = base64.split(','); // remove data:... prefix
+  const mimeMatch = header.match(/data:(.*);base64/);
+  const mimeType = mimeMatch ? mimeMatch[1] : 'application/octet-stream';
+  const byteCharacters = atob(base64Data);
+  const byteNumbers = Array.from(byteCharacters).map((c) => c.charCodeAt(0));
+  const byteArray = new Uint8Array(byteNumbers);
+  return new Blob([byteArray], { type: mimeType });
+};
+
+export const base64ToUrl = (base64: string) => {
+  const blob = blobFromBase64(base64);
+  return URL.createObjectURL(blob);
+};

package/src/lib/dom-utils.ts

@@ -0,0 +1,32 @@
+// todo: tree-shaking
+export class DomUtils {
+  public static getValue(cssSelector: string) {
+    return (document.querySelector(cssSelector) as HTMLInputElement)?.value;
+  }
+
+  public static setValue(cssSelector: string, value: string) {
+    const dom = document.querySelector(cssSelector) as HTMLInputElement;
+    if (dom) dom.value = value;
+  }
+
+  public static getChecked(cssSelector: string) {
+    return (document.querySelector(cssSelector) as HTMLInputElement)?.checked;
+  }
+
+  public static setChecked(cssSelector: string, checked: boolean) {
+    const dom = document.querySelector(cssSelector) as HTMLInputElement;
+    if (dom) dom.checked = checked;
+  }
+
+  public static joinValues(values: (string | undefined)[], joinChar = ' ') {
+    return values.filter(Boolean).join(joinChar);
+  }
+
+  public static byId(id: string) {
+    return document.querySelector(`#${id}`);
+  }
+
+  public static bySelector(selector: string) {
+    return document.querySelector(selector);
+  }
+}

package/src/lib/{dom/download.ts → download-link.ts}

@@ -1,4 +1,4 @@
-export const download = (link: string, filename?: string) => {
+export const downloadLink = (link: string, filename?: string) => {
   const dom = document.createElement('a');
   dom.setAttribute('href', link);
   dom.setAttribute('download', filename || 'true');

package/src/lib/{dom/download-stream.ts → download-stream.ts}

@@ -4,14 +4,16 @@
   downloadStream(blob, filename);
 */
 export const downloadStream = (blob: Blob, filename?: string) => {
+  const blobUrl = URL.createObjectURL(blob);
   const dom = document.createElement('a');
-  dom.setAttribute('href', URL.createObjectURL(blob));
+  dom.setAttribute('href', blobUrl);
   dom.setAttribute('download', filename || 'true');
   dom.style.display = 'none';
   document.body.appendChild(dom);
   dom.click();
   setTimeout(() => {
     document.body.removeChild(dom);
+    URL.revokeObjectURL(blobUrl);
   }, 3000);
   return dom;
 };

package/src/lib/escape-html.ts

@@ -0,0 +1,8 @@
+export const escapeHtml = (str: string) => {
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+};

package/src/lib/find-parent-tag.ts

@@ -0,0 +1,8 @@
+export const findParentTag = (dom: HTMLElement, tag: string) => {
+  const tagUpper = tag.toUpperCase();
+  let parent = dom.parentElement;
+  while (parent && parent.tagName !== tagUpper && parent.tagName !== 'BODY') {
+    parent = parent.parentElement;
+  }
+  return parent;
+};

package/src/lib/index.ts

@@ -1,14 +1,21 @@
-export * from './dom';
+export * from './blob-utils';
+export * from './calculate-text-width';
 export * from './date-utils';
 export * from './deep-merge';
 export * from './document-ready';
+export * from './dom-utils';
 export * from './download-file';
+export * from './download-link';
+export * from './download-stream';
 export * from './drag-util';
 export * from './dynamical-load';
+export * from './escape-html';
+export * from './find-parent-tag';
 export * from './format-bytes';
 export * from './lite-dom';
 export * from './message-hub';
 export * from './observable';
+export * from './path-utils';
 export * from './promise-timeout';
 export * from './simple-storage';
 export * from './stop-propagation';

package/src/lib/path-utils.ts

@@ -0,0 +1,37 @@
+export const pathUtils = {
+  join(...parts: string[]): string {
+    let joined = parts.filter(Boolean).join('/');
+    joined = joined.replace(/\/+/g, '/'); // merge duplicate slashes
+    const isAbsolute = parts[0]?.startsWith('/');
+    return isAbsolute ? '/' + joined.replace(/^\/+/, '') : joined.replace(/^\/+/, '');
+  },
+
+  dirname(p: string): string {
+    if (!p) return '.';
+    p = p.replace(/\/+$/, '');
+    const idx = p.lastIndexOf('/');
+    if (idx === -1) return '.';
+    if (idx === 0) return '/';
+    return p.slice(0, idx);
+  },
+
+  // get filename, remove ext if exists
+  basename(p: string, ext?: string): string {
+    if (!p) return '';
+    p = p.replace(/\/+$/, '');
+    const idx = p.lastIndexOf('/');
+    let base = idx === -1 ? p : p.slice(idx + 1);
+    if (ext && base.endsWith(ext)) {
+      base = base.slice(0, -ext.length);
+    }
+    return base;
+  },
+
+  // .hidden's ext is empty (Node.js behavior)
+  extname(p: string): string {
+    if (!p) return '';
+    const base = pathUtils.basename(p);
+    const idx = base.lastIndexOf('.');
+    return idx > 0 ? base.slice(idx) : '';
+  },
+};

package/src/frames/desktop-frame.tsx

@@ -1,81 +0,0 @@
-import { VNode, CssProps } from 'lupine.web';
-import { MediaQueryMaxWidth } from '../styles';
-import { MenuBar } from '../components';
-
-export interface MenuBarMenuProps {
-  id: string;
-  text: string;
-  url: string;
-}
-export const DesktopFrame = async (
-  placeholderClassname: string,
-  vnode: VNode<any>,
-  title: string,
-  footerTitle: string,
-  logoUrl: string,
-  menu: MenuBarMenuProps[]
-) => {
-  const cssContainer: CssProps = {
-    display: 'flex',
-    'flex-direction': 'column',
-    width: '100%',
-    'min-height': '100%',
-    'overflow-y': 'auto',
-    '.content-block': {
-      display: 'flex',
-      flex: '1',
-      margin: 'auto',
-      maxWidth: MediaQueryMaxWidth.DesktopMax,
-      width: '100%',
-    },
-    '.top-footer': {
-      paddingTop: '16px',
-    },
-    '.header-box': {
-      display: 'flex',
-      'flex-direction': 'column',
-      width: '100%',
-      'min-height': '100%',
-      'overflow-y': 'auto',
-      '.content-block': {
-        display: 'flex',
-        flex: '1',
-        margin: 'auto',
-        maxWidth: MediaQueryMaxWidth.DesktopMax,
-        width: '100%',
-      },
-      '.top-footer': {
-        paddingTop: '16px',
-      },
-    },
-    '.footer-box': {
-      display: 'flex',
-      padding: '0 32px 16px',
-      '.footer-cp': {
-        padding: '1px 15px',
-        margin: 'auto',
-      },
-    },
-  };
-
-  return (
-    <div css={cssContainer}>
-      <div class='header-box'>
-        <div class='logo-box'>
-          <img class='logo' src={logoUrl} />
-        </div>
-        <div class='header-title'>
-          {title}
-          {/* <div class='header-subtitle pt-s'>{'ver: ' + getWebVersion()}</div> */}
-        </div>
-      </div>
-      <MenuBar items={menu} maxWidthMobileMenu={'800px'} maxWidth={MediaQueryMaxWidth.DesktopMax}></MenuBar>
-      <div class={'content-block ' + placeholderClassname}>{vnode}</div>
-      <div class='top-footer'>
-        <div class='footer-box'>
-          <div class='footer-cp'>{footerTitle}</div>
-        </div>
-      </div>
-    </div>
-  );
-};