lupine.components 1.0.17 → 1.0.19

package/package.json

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

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/menu-bar.tsx

@@ -58,7 +58,7 @@ export const MenuBar = ({
       display: 'none',
       position: 'absolute',
       backgroundColor: 'var(--menubar-sub-bg-color)', //'#f9f9f9',
-      minWidth: '160px',
+      minWidth: '165px',
       boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
       zIndex: 'var(--layer-menu-sub)',
       flexDirection: 'column',

package/src/components/menu-sidebar.tsx

@@ -67,7 +67,7 @@ export const MenuSidebar = ({
       // position: 'absolute',
       // color: 'var(--sidebar-sub-color)',
       // backgroundColor: 'var(--sidebar-sub-bg-color)',
-      minWidth: '160px',
+      minWidth: '165px',
       // boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
       zIndex: 'var(--layer-sidebar-sub)',
       flexDirection: 'column',

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/modal.tsx

@@ -12,6 +12,7 @@ export class ModalWindow {
     closeEvent,
     handleClicked,
     closeWhenClickOutside = true,
+    zIndex,
   }: FloatWindowShowProps): Promise<FloatWindowCloseProps> {
     return FloatWindow.show({
       title,
@@ -24,6 +25,7 @@ export class ModalWindow {
       closeEvent,
       handleClicked,
       closeWhenClickOutside,
+      zIndex,
     });
   }
 }