lupine.components 1.0.16 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/components/action-sheet.tsx

@@ -4,10 +4,13 @@ export type ActionSheetCloseProps = () => void;
 
 export type ActionSheetShowProps = {
   title: string;
-  children: VNode<any>;
+  children: string | VNode<any>;
+  contentMaxWidth?: string;
   contentMaxHeight?: string;
   closeEvent?: () => void;
   closeWhenClickOutside?: boolean; // default true
+  confirmButtonText?: string; // no showing if not set
+  handleConfirmClicked?: (close: ActionSheetCloseProps) => void;
   cancelButtonText?: string; // no showing if not set
   zIndex?: string;
 };
@@ -19,12 +22,22 @@ export class ActionSheet {
   static async show({
     title,
     children,
+    contentMaxWidth,
     contentMaxHeight,
     closeEvent,
     closeWhenClickOutside = true,
+    confirmButtonText = '',
+    handleConfirmClicked,
     cancelButtonText = 'Cancel',
     zIndex,
   }: ActionSheetShowProps): Promise<ActionSheetCloseProps> {
+    const onConfirm = () => {
+      if (handleConfirmClicked) {
+        handleConfirmClicked(handleClose);
+      } else {
+        handleClose();
+      }
+    };
     const onCancel = () => {
       handleClose();
     };
@@ -64,7 +77,7 @@ export class ActionSheet {
         bottom: '0px',
         left: '0px',
         width: '100%',
-        maxHeight: contentMaxHeight ? contentMaxHeight : '',
+        maxHeight: contentMaxHeight ? contentMaxHeight : '100%',
         color: 'var(--primary-color)',
         padding: '8px',
         transition: 'all 0.3s',
@@ -84,7 +97,7 @@ export class ActionSheet {
           borderRadius: '8px',
           backgroundColor: 'var(--cover-bg-color)', //'#fefefe',
           width: '100%',
-          maxWidth: '450px',
+          maxWidth: contentMaxWidth ? contentMaxWidth : `clamp(200px, 70%, 800px)`,
           margin: '0 auto',
         },
         '.act-sheet-bottom-item, .act-sheet-item': {
@@ -93,7 +106,7 @@ export class ActionSheet {
           cursor: 'pointer',
           transition: 'all 0.3s ease',
           width: '100%',
-          maxWidth: '450px',
+          maxWidth: contentMaxWidth ? contentMaxWidth : `clamp(200px, 70%, 800px)`,
           borderTop: '1px solid var(--primary-border-color)',
         },
         '.act-sheet-bottom-item': {
@@ -104,6 +117,11 @@ export class ActionSheet {
         '.act-sheet-bottom-item:hover, .act-sheet-item:hover': {
           fontWeight: 'bold',
         },
+        '.act-sheet-confirm, .act-sheet-item': {
+          borderRadius: 'unset',
+          marginTop: 'unset',
+          maxWidth: 'unset',
+        },
       },
     };
     const component = (
@@ -112,6 +130,11 @@ export class ActionSheet {
           <div class='act-sheet-content'>
             <div class='act-sheet-title'>{title}</div>
             {children}
+            {confirmButtonText && (
+            <div class='act-sheet-bottom-item act-sheet-confirm' onClick={onConfirm}>
+              {confirmButtonText}
+            </div>
+          )}
           </div>
           {cancelButtonText && (
             <div class='act-sheet-bottom-item' onClick={onCancel}>
@@ -131,7 +154,7 @@ export class ActionSheet {
 
 export const ActionSheetSelectOptionsProps = {
   YesNo: ['Yes', 'No'],
-  OkCancel: ['OK'],
+  Ok: ['OK'],
 };
 export type ActionSheetSelectProps = Omit<ActionSheetShowProps, 'children'> & {
   options: string[];
@@ -142,10 +165,12 @@ export class ActionSheetSelect {
   static async show({
     title,
     contentMaxHeight,
-    options = ActionSheetSelectOptionsProps.OkCancel,
+    options = ActionSheetSelectOptionsProps.Ok,
     closeEvent,
     handleClicked,
     closeWhenClickOutside = true,
+    confirmButtonText,
+    handleConfirmClicked,
     cancelButtonText = 'Cancel',
   }: ActionSheetSelectProps): Promise<ActionSheetCloseProps> {
     const handleClose = await ActionSheet.show({
@@ -160,6 +185,8 @@ export class ActionSheetSelect {
         </div>
       ),
       contentMaxHeight,
+      confirmButtonText,
+      handleConfirmClicked,
       cancelButtonText,
       closeEvent,
       closeWhenClickOutside,
@@ -169,7 +196,7 @@ export class ActionSheetSelect {
 }
 
 export type ActionSheetMessageProps = Omit<ActionSheetShowProps, 'children' | 'handleClicked' | 'closeEvent'> & {
-  message: string;
+  message: string | VNode<any>;
 };
 export class ActionSheetMessage {
   static async show({
@@ -177,13 +204,17 @@ export class ActionSheetMessage {
     message,
     contentMaxHeight,
     closeWhenClickOutside = true,
+    confirmButtonText,
+    handleConfirmClicked,
     cancelButtonText = '',
   }: ActionSheetMessageProps): Promise<ActionSheetCloseProps> {
     const handleClose = await ActionSheet.show({
       title,
-      children: <div css={{ padding: '0 8px 16px 8px' }}>{message}</div>,
+      children: <div css={{ padding: '8px',borderTop: '1px solid var(--primary-border-color)', }}>{message}</div>,
       contentMaxHeight,
-      cancelButtonText,
+      confirmButtonText,
+      handleConfirmClicked,
+        cancelButtonText,
       closeWhenClickOutside,
     });
     return handleClose;

package/src/components/desktop-footer.tsx

@@ -0,0 +1,17 @@
+import { CssProps } from 'lupine.components';
+
+export const DesktopFooter = (props: { title: string }) => {
+  const css: CssProps = {
+    display: 'flex',
+    padding: '0 32px 16px',
+    '.d-footer-cp': {
+      padding: '1px 15px',
+      margin: 'auto',
+    },
+  };
+  return (
+    <div css={css} class='d-footer-box'>
+      <div class='d-footer-cp'>{props.title}</div>
+    </div>
+  );
+};

package/src/components/desktop-header.tsx

@@ -0,0 +1,52 @@
+import { CssProps } from 'lupine.components';
+import { IconMenuItemProps } from './mobile-components/icon-menu-item-props';
+
+export const DesktopHeader = (props: { title: string; items: IconMenuItemProps[] }) => {
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    height: '100%',
+    '.d-header-title': {
+      display: 'flex',
+      flex: '1',
+      margin: '8px 16px',
+      textShadow: '-3px -3px 10px white, 3px 3px 10px black',
+      color: 'darkblue',
+      fontSize: '22px',
+    },
+    '.desktop-menu-bar': {
+      display: 'flex',
+      flexDirection: 'row',
+      width: 'auto',
+      padding: '4px 16px 0',
+      '.desktop-menu-item': {
+        display: 'flex',
+        padding: '0 8px',
+        height: 'fit-content',
+        a: {
+          textDecoration: 'none',
+          color: 'var(--sidebar-color)',
+          i: {
+            paddingRight: '4px',
+          },
+        },
+      },
+    },
+  };
+  return (
+    <div css={css} class='desktop-menu-box'>
+      <div class='flex-1 d-header-title'>{props.title}</div>
+      <div class='desktop-menu-bar'>
+        {props.items.map((item) => (
+          <div class='desktop-menu-item'>
+            <a href={item.href}>
+              <i class={`ifc-icon ${item.icon}`}></i>
+              {item.text}
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/mobile-components/icon-menu-item-props.ts

@@ -0,0 +1,6 @@
+export interface IconMenuItemProps {
+  icon: string;
+  href: string;
+  text: string;
+  topout?: boolean; // Topout for mobile bottom icon menu
+}

package/src/components/mobile-components/index.ts

@@ -1,2 +1,9 @@
+export * from './icon-menu-item-props';
 export * from './mobile-footer-menu';
+export * from './mobile-frame-with-header';
 export * from './mobile-header-component';
+export * from './mobile-header-title-icon';
+export * from './mobile-side-menu';
+export * from './mobile-top-sys-icon';
+export * from './mobile-top-sys-menu';
+

package/src/components/mobile-components/mobile-footer-menu.tsx

@@ -1,14 +1,8 @@
-import { CssProps } from 'lupine.web';
-import { MediaQueryRange } from '../../styles';
+import { CssProps, MediaQueryRange } from 'lupine.components';
+import { IconMenuItemProps } from './icon-menu-item-props';
 
-export interface MobileFooterMenuItemProps {
-  icon: string;
-  href: string;
-  text: string;
-  topout?: boolean;
-}
 export interface MobileFooterMenuProps {
-  items: MobileFooterMenuItemProps[];
+  items: IconMenuItemProps[];
   color?: string;
   activeColor?: string;
   topoutColor?: string;
@@ -51,8 +45,10 @@ export const MobileFooterMenu = (props: MobileFooterMenuProps) => {
     '.footer-menu .footer-menu-item.footer-menu-topout': {
       marginTop: '-43px',
       borderRadius: '50%',
-      backgroundColor: props.topoutBackgroundColor || '#ff8f8f',
+      backgroundColor: props.topoutBackgroundColor || '#f33939',
       color: props.topoutColor || 'var(--primary-color)',
+    },
+    '.footer-menu .footer-menu-item-a': {
       zIndex: 'var(--layer-header-footer)',
     },
     '.footer-menu .footer-menu-item.active': {
@@ -76,7 +72,7 @@ export const MobileFooterMenu = (props: MobileFooterMenuProps) => {
     <div css={css} class='footer-menu-box'>
       <div class='footer-menu'>
         {props.items.map((item, index) => (
-          <a href={item.href} key={index}>
+          <a class='footer-menu-item-a' href={item.href} key={index}>
             <div
               class={`footer-menu-item ${item.topout ? 'footer-menu-topout' : ''} ${
                 curretnUrl === item.href ? 'active' : ''
@@ -88,11 +84,11 @@ export const MobileFooterMenu = (props: MobileFooterMenuProps) => {
             </div>
           </a>
         ))}
-        {/* <div class='footer-menu-item'><a href='/'><i class="ifc-icon bs-person-gear"></i>主页</a></div>
+        {/* <div class='footer-menu-item'><a href='/'><i class="ifc-icon ma-home-outline"></i>主页</a></div>
         <div class='footer-menu-item'><a href='/user/tools'><i class="ifc-icon bo-multimedia-music-note"></i>工具</a></div>
         <div class='footer-menu-item footer-menu-topout'><a href='/user/customer'><i class="ifc-icon co-cil-chat-bubble"></i>客服</a></div>
         <div class='footer-menu-item'><a href='/user/member'><i class="ifc-icon ma-crown-outline"></i>会员</a></div>
-        <div class='footer-menu-item'><a href='/user/mine'><i class="ifc-icon bs-person-gear"></i>我的</a></div> */}
+        <div class='footer-menu-item'><a href='/user/mine'><i class="ifc-icon ma-account-cog-outline"></i>我的</a></div> */}
       </div>
     </div>
   );

package/src/{frames/header-with-back-frame.tsx → components/mobile-components/mobile-frame-with-header.tsx}

@@ -1,4 +1,9 @@
+/*
+HeaderWithBackFrame is a full page frame with header for mobile sliders.
+It has Back icon at Left and Close icon at Right.
+*/
 import { VNode, CssProps, RefProps, HtmlVar } from 'lupine.components';
+import { MobileHeaderTitleIcon } from './mobile-header-title-icon';
 
 export const HeaderWithBackFrameHeight = '40px';
 export const HeaderWithBackFrameLeft = ({ onClick }: { onClick: (event: Event) => void }) => {
@@ -16,10 +21,11 @@ export const HeaderWithBackFrameEmpty = () => {
 };
 
 export interface HeaderWithBackFrameHookProps {
-  updateTitle?: (title: string) => void;
+  updateTitle?: (title: VNode<any> | string) => void;
   updateLeft?: (left: VNode<any>) => void;
   updateRight?: (right: VNode<any>) => void;
 }
+// there may have a few HeaderWithBackFrame one over another at the same time
 export const HeaderWithBackFrame = ({
   children,
   title,
@@ -30,7 +36,7 @@ export const HeaderWithBackFrame = ({
   noHeader = false,
 }: {
   children: VNode<any>;
-  title: string;
+  title: VNode<any> | string;
   onBack: (event: Event) => void;
   left?: VNode<any>;
   right?: VNode<any>;
@@ -51,7 +57,7 @@ export const HeaderWithBackFrame = ({
       width: '100vw',
       padding: '6px 0',
       backgroundColor: 'var(--activatable-bg-color-normal)',
-      boxShadow: '0 2px 4px var(--primary-border-color)',
+      boxShadow: 'var(--mobile-header-shadow)',
     },
     '.header-back-content': {
       display: 'flex',
@@ -61,10 +67,12 @@ export const HeaderWithBackFrame = ({
       scrollbarWidth: 'none',
       position: 'relative',
       '&::-webkit-scrollbar': {
-        height: '0',
+        display: 'none',
+        // height: '0',
       },
     },
     '.header-back-title': {
+      fontSize: '15px',
       flex: '1',
       color: 'var(--activatable-text-color-normal)',
       overflow: 'hidden',
@@ -84,13 +92,11 @@ export const HeaderWithBackFrame = ({
     '.header-back-left i, .header-back-right i': {
       fontSize: '28px',
     },
-
   };
 
   if (hook) {
-    hook.updateTitle = (title: string) => {
-      const titleDom = ref.current?.querySelector('.header-back-title') as HTMLDivElement;
-      titleDom && (titleDom.textContent = title);
+    hook.updateTitle = (title: VNode<any> | string) => {
+      domCenter.value = title;
     };
     hook.updateLeft = (left: VNode<any>) => {
       domLeft.value = left;
@@ -100,16 +106,19 @@ export const HeaderWithBackFrame = ({
     };
   }
   const domLeft = HtmlVar(left);
+  const domCenter = HtmlVar(title);
   const domRight = HtmlVar(right);
   const ref: RefProps = {};
   return (
     <div ref={ref} css={css} class='header-back-frame'>
       {!noHeader && (
-        <div class='header-back-top'>
-          <div class='header-back-left'>{domLeft.node}</div>
-          <div class='mobile-title header-back-title'>{title}</div>
-          <div class='header-back-right'>{domRight.node}</div>
-        </div>
+        <MobileHeaderTitleIcon
+          onBack={onBack}
+          left={domLeft.node}
+          title={domCenter.node}
+          right={domRight.node}
+          hook={hook}
+        />
       )}
       <div class='header-back-content'>{children}</div>
     </div>

package/src/components/mobile-components/mobile-header-component.tsx

@@ -1,5 +1,16 @@
-import { CssProps, VNode } from 'lupine.web';
-import { HtmlVar } from '../html-var';
+/*
+MobileHeaderComponent is the topest header for mobile, and Left, Center and Right part can be updated by other components
+
+If Left and Right are not set, then Center (100% width) can be used by temporiry headers like MobileHeaderTitleIcon,
+to set Left and Right icons inside Center part.
+
+For example, the header can be updated like this with different Left and Right icons:
+<MobileHeaderCenter>
+  <MobileHeaderTitleIcon title='工具' left={<MobileHeaderEmptyIcon />} right={<MobileTopSysIcon />} />
+</MobileHeaderCenter>
+You can update Left, Right and Center separately, but it's convenient to use MobileHeaderCenter to set both Left and Right icons..
+*/
+import { CssProps, HtmlVar, VNode } from 'lupine.components';
 
 export class MobileHeaderHelper {
   private static instance: MobileHeaderHelper;
@@ -63,14 +74,15 @@ export const MobileHeaderHide = () => {
   return <></>;
 };
 
+// there should be only one MobileHeaderComponent on a page
 export const MobileHeaderComponent = (props: any) => {
   const css: CssProps = {
     display: 'flex',
     flexDirection: 'row',
     width: '100%',
     height: 'auto',
-    padding: '2px 0',
-    boxShadow: '0 4px 4px var(--primary-border-color)', // 第二项 2px 的话，顶部有阴影（线）
+    // padding: '2px 0',
+    // boxShadow: 'var(--mobile-header-shadow)', // 第二项 2px 的话，顶部有阴影（线）
     '& > *': {
       height: '100%',
     },

package/src/components/mobile-components/mobile-header-title-icon.tsx

@@ -0,0 +1,105 @@
+/*
+MobileHeaderTitleIcon can be used in MobileHeaderComponent's Center part.
+It has it's own Left and Right icons.
+*/
+import { VNode, CssProps, HtmlVar } from 'lupine.components';
+
+export const MobileHeadeIconHeight = '40px';
+export const MobileHeadeBackIcon = ({ onClick }: { onClick: (event: Event) => void }) => {
+  return <i class='ifc-icon mg-arrow_back_ios_new_outlined mhti-back-icon' onClick={(event) => onClick(event)}></i>;
+};
+
+export const MobileHeadeCloseIcon = ({ onClick }: { onClick: (event: Event) => void }) => {
+  return <i class='ifc-icon ma-close mhti-close-icon' onClick={(event) => onClick(event)}></i>;
+};
+
+export const MobileHeaderEmptyIcon = () => {
+  return <div class='mhti-empty-icon' style={{ width: '28px' }}></div>;
+};
+
+export interface MobileHeaderTitleIconHookProps {
+  updateTitle?: (title: VNode<any> | string) => void;
+  updateLeft?: (left: VNode<any>) => void;
+  updateRight?: (right: VNode<any>) => void;
+}
+export interface MobileHeaderTitleIconProps {
+  title: VNode<any> | string;
+  onBack?: (event: Event) => void;
+  left?: VNode<any>;
+  right?: VNode<any>;
+  hook?: MobileHeaderTitleIconHookProps;
+}
+// there may have a few MobileHeaderTitleIcon for different pages
+export const MobileHeaderTitleIcon = ({ title, onBack, left, right, hook }: MobileHeaderTitleIconProps) => {
+  // const processBack = (event: Event) => {
+  //   if (onBack) {
+  //     onBack(event);
+  //   }
+  // };
+  // left = left || <MobileHeadeBackIcon onClick={processBack} />;
+  // right = right || <MobileHeadeCloseIcon onClick={processBack} />;
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100vw',
+    padding: '6px 0',
+    backgroundColor: 'var(--activatable-bg-color-normal)',
+    boxShadow: 'var(--mobile-header-shadow)',
+    '.mhti-title': {
+      display: 'flex',
+      fontSize: '1.3rem',
+      flex: '1',
+      color: 'var(--activatable-text-color-normal)',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    '.mhti-title > *': {
+      display: 'flex',
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    '.mhti-left, .mhti-right': {
+      height: MobileHeadeIconHeight,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      fontSize: '16px',
+    },
+    '.mhti-left': {
+      paddingLeft: '8px',
+    },
+    '.mhti-right': {
+      paddingRight: '8px',
+    },
+    '.mhti-left i, .mhti-right i': {
+      fontSize: '28px',
+    },
+  };
+
+  if (hook) {
+    hook.updateTitle = (title: VNode<any> | string) => {
+      domCenter.value = title;
+    };
+    hook.updateLeft = (left: VNode<any>) => {
+      domLeft.value = left;
+    };
+    hook.updateRight = (right: VNode<any>) => {
+      domRight.value = right;
+    };
+  }
+  const domLeft = HtmlVar(left);
+  const domCenter = HtmlVar(title);
+  const domRight = HtmlVar(right);
+  return (
+    <div css={css} class='mobile-header-title-icon-top'>
+      <div class='mhti-left'>{domLeft.node}</div>
+      <div class='mhti-title'>{domCenter.node}</div>
+      <div class='mhti-right'>{domRight.node}</div>
+    </div>
+  );
+};

package/src/components/mobile-components/mobile-side-menu.tsx

@@ -0,0 +1,150 @@
+import { CssProps, RefProps, VNode } from 'lupine.components';
+
+export class MobileSideMenuHelper {
+  static show() {
+    const ref = document.querySelector('.mobile-side-menu-mask') as HTMLDivElement;
+    ref.classList.add('show');
+    setTimeout(() => {
+      ref.classList.add('animate-show');
+    }, 1);
+  }
+
+  static hide() {
+    const ref = document.querySelector('.mobile-side-menu-mask') as HTMLDivElement;
+    ref.classList.remove('animate-show');
+    setTimeout(() => {
+      ref.classList.remove('show');
+    }, 300);
+  }
+
+  static isTouchEventAdded = false;
+  static addTouchEvent() {
+    if (this.isTouchEventAdded) {
+      return;
+    }
+
+    this.isTouchEventAdded = true;
+    let touchstartY = 0;
+    let touchstartX = 0;
+    let direction = '';
+    let moveStart = false;
+    let isOpen = false;
+    const maskDom = document.querySelector('.mobile-side-menu-mask') as HTMLDivElement;
+    document.addEventListener('touchstart', (e) => {
+      touchstartY = e.touches[0].clientY;
+      touchstartX = e.touches[0].clientX;
+      direction = '';
+      moveStart = false;
+      isOpen = maskDom?.classList.contains('show');
+      if (isOpen) {
+        if (touchstartX > 80) {
+          moveStart = true;
+        }
+      } else {
+        if (touchstartX < 40) {
+          moveStart = true;
+        }
+      }
+      // if (e.touches[0].clientX < 30 && !maskDom?.classList.contains('show')) {
+      //   // 靠左边缘, 如果菜单已经打开，忽略手势
+      //   touchStartX = e.touches[0].clientX;
+      // } else {
+      //   touchStartX = -1; // 忽略非左侧边缘手势
+      // }
+    });
+
+    document.addEventListener('touchmove', (e) => {
+      if (!moveStart) {
+        return;
+      }
+
+      // console.log('touchmove', e.touches[0].clientX);
+      if (direction === '') {
+        if (e.touches[0].clientX - touchstartX !== 0) {
+          direction = 'X';
+        } else {
+          moveStart = false;
+          return;
+        }
+      }
+
+      if (isOpen) {
+        if (e.touches[0].clientX - touchstartX < 30) {
+          MobileSideMenuHelper.hide();
+          moveStart = false;
+          return;
+        }
+      } else {
+        if (e.touches[0].clientX - touchstartX > 80) {
+          MobileSideMenuHelper.show();
+          moveStart = false;
+          return;
+        }
+      }
+    });
+
+    document.addEventListener('touchend', () => {
+      moveStart = false;
+      direction = '';
+    });
+  }
+}
+export const MobileSideMenu = (props: { children: VNode<any> }) => {
+  const css: CssProps = {
+    '.mobile-side-menu-mask': {
+      display: 'none',
+      flexDirection: 'column',
+      position: 'fixed',
+      top: '0',
+      left: '0',
+      right: '0',
+      bottom: '0',
+      zIndex: 'var(--layer-menu)',
+      backgroundColor: '#000000b0',
+      '&.show': {
+        display: 'flex',
+      },
+      '&.animate-show .mobile-side-menu': {
+        transform: 'scaleX(1)',
+      },
+    },
+    '.mobile-side-menu': {
+      display: 'flex',
+      flexDirection: 'column',
+      padding: '16px',
+      transition: 'transform 0.3s ease-in-out',
+      backgroundColor: 'var(--primary-bg-color)',
+      width: '70%',
+      maxWidth: '300px',
+      height: '100%',
+      overflowX: 'hidden',
+      overflowY: 'auto',
+      transformOrigin: 'left',
+      transform: 'scaleX(0)',
+      // boxShadow: 'var(--block-box-shadow)',
+      boxShadow: 'var(--cover-box-shadow)',
+    },
+  };
+
+  const onClickContainer = (event: Event) => {
+    if (
+      event.target instanceof HTMLDivElement &&
+      (event.target as HTMLDivElement).classList.contains('mobile-side-menu-mask')
+    ) {
+      MobileSideMenuHelper.hide();
+    }
+  };
+  const ref: RefProps = {
+    onLoad: async () => {
+      MobileSideMenuHelper.addTouchEvent();
+    },
+  };
+  return (
+    <div css={css} ref={ref}>
+      {/* <SliderFrame hook={props.sliderFrameHook} /> */}
+      <div class='mobile-side-menu-mask' onClick={onClickContainer}>
+        <div class='mobile-side-menu'>{props.children}</div>
+      </div>
+    </div>
+  );
+};

package/src/components/mobile-components/mobile-top-sys-icon.tsx

@@ -0,0 +1,18 @@
+// import { NotificationColor, NotificationMessage, updateTheme, PopupMenuWithIcon, CssProps } from 'lupine.components';
+import { CssProps } from 'lupine.components';
+import { MobileSideMenuHelper } from './mobile-side-menu';
+
+export const MobileTopSysIcon = () => {
+  const css: CssProps = {
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    fontSize: '28px',
+  };
+  return (
+    <div css={css} onClick={() => MobileSideMenuHelper.show()}>
+      <i class='ifc-icon bs-list'></i>
+    </div>
+  );
+};

package/src/components/mobile-components/mobile-top-sys-menu.tsx

@@ -0,0 +1,62 @@
+/*
+  const onLogout = async () => {
+    logout('/');
+  };
+  const userCookie = getCookieUser();
+  const listMenu = [
+    userCookie && (userCookie.email || userCookie.phone || userCookie.wx) ? '退出登录' : '登录',
+    '',
+    '浅色模式',
+    '深色模式',
+    '系统模式',
+    '',
+    '帮助',
+    '关于',
+  ];
+  if (userCookie && userCookie.admin === '1') {
+    listMenu.splice(0, 0, '管理员');
+  }
+
+  const handleSelected = (value: string) => {
+    if (value === '浅色模式') {
+      updateTheme('light');
+    } else if (value === '深色模式') {
+      updateTheme('dark');
+    } else if (value === '系统模式') {
+      const themeMedia = window.matchMedia('(prefers-color-scheme: light)');
+      if (themeMedia.matches) {
+        document.documentElement.classList.remove('dark');
+        document.documentElement.classList.add('light');
+      } else {
+        document.documentElement.classList.remove('light');
+        document.documentElement.classList.add('dark');
+      }
+    } else if (value === '退出登录') {
+      onLogout();
+    } else if (value === '登录') {
+      window.location.href = '/login';
+    } else if (value === '管理员') {
+      window.open('/admin');
+    } else {
+      NotificationMessage.sendMessage('Selected: ' + value, NotificationColor.Success);
+    }
+  }
+*/
+import { PopupMenuWithIcon } from 'lupine.components';
+
+export const MobileTopSysMenu = (props: { menuItems: string[]; handleSelected: (value: string) => void }) => {
+  return (
+    <PopupMenuWithIcon
+      list={props.menuItems}
+      defaultValue=''
+      tips=''
+      minWidth='auto'
+      maxWidth='200px'
+      maxHeight='300px'
+      align='right'
+      noTriangleIcon={true}
+      handleSelected={props.handleSelected}
+      noUpdateLabel={true}
+    ></PopupMenuWithIcon>
+  );
+};

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/dom/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/upload-file.ts

@@ -73,9 +73,12 @@ export const uploadFile = async (
     chunkSize = _saveChunkSize.size;
   }
   if (len <= chunkSize) {
-    const uploaded = await uploadFileChunk(file, 0, 1, uploadUrl, key, retryCount, retryMessage);
-    if (!uploaded || uploaded.status !== 'ok') {
-      return false;
+    const result = await uploadFileChunk(file, 0, 1, uploadUrl, key, retryCount, retryMessage);
+    if (!result || result.status !== 'ok') {
+      return result;
+    }
+    if (progressFn) {
+      progressFn(1, 0, len);
     }
     return true;
   }
@@ -85,11 +88,11 @@ export const uploadFile = async (
     const start = i * chunkSize;
     const end = Math.min((i + 1) * chunkSize, len);
     const chunk = file.slice(start, end);
-    const uploaded = await uploadFileChunk(chunk, i, totalChunks, uploadUrl, key, retryCount, retryMessage);
-    if (!uploaded || uploaded.status !== 'ok') {
-      return false;
+    const result = await uploadFileChunk(chunk, i, totalChunks, uploadUrl, key, retryCount, retryMessage);
+    if (!result || result.status !== 'ok') {
+      return result;
     }
-    key = uploaded.key;
+    key = result.key;
     if (progressFn) {
       progressFn(Math.round(((i + 1) / totalChunks) * 100) / 100, i, totalChunks);
     }

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>
-  );
-};