lupine.components 1.0.10 → 1.0.12

package/package.json

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

package/src/components/index.ts

@@ -34,3 +34,5 @@ export * from './text-wave';
 export * from './theme-selector';
 export * from './toggle-base';
 export * from './toggle-switch';
+
+export * from './mobile-components';

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

@@ -0,0 +1,2 @@
+export * from './mobile-footer-menu';
+export * from './mobile-header-component';

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

@@ -0,0 +1,99 @@
+import { CssProps } from 'lupine.web';
+import { MediaQueryRange } from '../../styles';
+
+export interface MobileFooterMenuItemProps {
+  icon: string;
+  href: string;
+  text: string;
+  topout?: boolean;
+}
+export interface MobileFooterMenuProps {
+  items: MobileFooterMenuItemProps[];
+  color?: string;
+  activeColor?: string;
+  topoutColor?: string;
+  topoutBackgroundColor?: string;
+}
+export const MobileFooterMenu = (props: MobileFooterMenuProps) => {
+  const css: CssProps = {
+    '.footer-menu': {
+      display: 'none',
+      // position: 'fixed',
+      // left: 0,
+      // right: 0,
+      // bottom: 0,
+      width: '100%',
+      background: 'var(--sidebar-bg-color)',
+      paddingBottom: 'env(safe-area-inset-bottom)',
+      minHeight: '50px',
+      justifyContent: 'space-around',
+      alignItems: 'center',
+      borderTop: 'var(--primary-border)',
+    },
+    '.footer-menu, .footer-menu a': {
+      textDecoration: 'none',
+      color: props.color || 'var(--primary-color)',
+    },
+    '.footer-menu .footer-menu-item': {
+      padding: '4px 16px 4px 16px',
+      fontSize: '11px',
+      height: '55px', // 和主页保留的底部菜单高度一致
+      width: '55px',
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+    },
+    '.footer-menu .footer-menu-item i': {
+      display: 'block',
+      fontSize: '22px',
+      marginBottom: '4px',
+    },
+    '.footer-menu .footer-menu-item.footer-menu-topout': {
+      marginTop: '-43px',
+      borderRadius: '50%',
+      backgroundColor: props.topoutBackgroundColor || '#ff8f8f',
+      color: props.topoutColor || 'var(--primary-color)',
+      zIndex: 'var(--layer-header-footer)',
+    },
+    '.footer-menu .footer-menu-item.active': {
+      color: props.activeColor || 'var(--primary-accent-color)',
+    },
+    [MediaQueryRange.TabletBelow]: {
+      '.footer-menu': {
+        display: 'flex',
+      },
+    },
+  };
+  const onClick = (index: number, href: string) => {
+    const items = document.querySelector('.footer-menu-item.active');
+    items?.classList.remove('active');
+    // find footer-menu-item by index
+    const item = document.querySelector(`a:nth-child(${index + 1}) .footer-menu-item`);
+    item?.classList.add('active');
+  };
+  let curretnUrl = typeof window !== 'undefined' ? window.location.pathname : '';
+  return (
+    <div css={css} class='footer-menu-box'>
+      <div class='footer-menu'>
+        {props.items.map((item, index) => (
+          <a href={item.href} key={index}>
+            <div
+              class={`footer-menu-item ${item.topout ? 'footer-menu-topout' : ''} ${
+                curretnUrl === item.href ? 'active' : ''
+              }`}
+              onClick={() => onClick(index, item.href)}
+            >
+              <i class={`ifc-icon ${item.icon}`}></i>
+              {item.text}
+            </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='/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>
+    </div>
+  );
+};

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

@@ -0,0 +1,89 @@
+import { CssProps, VNode } from 'lupine.web';
+import { HtmlVar } from '../html-var';
+
+export class MobileHeaderHelper {
+  private static instance: MobileHeaderHelper;
+
+  private leftContent = HtmlVar('');
+  private centerContent = HtmlVar('');
+  private rightContent = HtmlVar('');
+  private constructor() {}
+
+  public static getInstance(): MobileHeaderHelper {
+    if (!MobileHeaderHelper.instance) {
+      MobileHeaderHelper.instance = new MobileHeaderHelper();
+    }
+    return MobileHeaderHelper.instance;
+  }
+
+  public setLeftContent(content: string | VNode<any>) {
+    this.leftContent.value = content;
+  }
+  public getLeftContent() {
+    return this.leftContent;
+  }
+  public setCenterContent(content: string | VNode<any>) {
+    this.centerContent.value = content;
+  }
+  public getCenterContent() {
+    return this.centerContent;
+  }
+  public setRightContent(content: string | VNode<any>) {
+    this.rightContent.value = content;
+  }
+  public getRightContent() {
+    return this.rightContent;
+  }
+
+  public hideHeader() {
+    this.leftContent.value = '';
+    this.centerContent.value = '';
+    this.rightContent.value = '';
+  }
+}
+export const mobileHeaderHelper = MobileHeaderHelper.getInstance();
+
+export const MobileHeaderLeft = (props: { children: VNode<any> }) => {
+  mobileHeaderHelper.setLeftContent(props.children);
+  return <></>;
+};
+
+export const MobileHeaderCenter = (props: { children: VNode<any> }) => {
+  mobileHeaderHelper.setCenterContent(props.children);
+  return <></>;
+};
+
+export const MobileHeaderRight = (props: { children: VNode<any> }) => {
+  mobileHeaderHelper.setRightContent(props.children);
+  return <></>;
+};
+
+export const MobileHeaderHide = () => {
+  mobileHeaderHelper.hideHeader();
+  return <></>;
+};
+
+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 的话，顶部有阴影（线）
+    '& > *': {
+      height: '100%',
+    },
+    '.mobile-header-center': {
+      flex: 1,
+    },
+  };
+
+  return (
+    <div css={css} class='mobile-header-component'>
+      <div class='mobile-header-left'>{mobileHeaderHelper.getLeftContent().node}</div>
+      <div class='mobile-header-center'>{mobileHeaderHelper.getCenterContent().node}</div>
+      <div class='mobile-header-right'>{mobileHeaderHelper.getRightContent().node}</div>
+    </div>
+  );
+};

package/src/components/popup-menu.tsx

@@ -1,11 +1,46 @@
-import { RefProps } from 'lupine.web';
+import { CssProps, RefProps, VNode } from 'lupine.web';
 import { stopPropagation } from '../lib';
 
 export type PopupMenuOpenMenuProps = { handle?: Function };
 
+// defaultValue=<i class='ifc-icon co-cil-hamburger-menu'></i>
+export const PopupMenuWithIcon = (props: PopupMenuProps) => {
+  const handle: PopupMenuOpenMenuProps = {};
+  const css: CssProps = {
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    fontSize: '24px',
+  };
+  return (
+    <div
+      onClick={() => {
+        handle.handle && handle.handle();
+      }}
+      css={css}
+    >
+      <PopupMenu
+        list={props.list}
+        defaultValue={props.defaultValue}
+        tips={props.tips}
+        minWidth={props.minWidth}
+        maxWidth={props.maxWidth}
+        maxHeight={props.maxHeight}
+        handleSelected={props.handleSelected}
+        handleOpened={props.handleOpened}
+        handleClosed={props.handleClosed}
+        noUpdateValue={props.noUpdateValue}
+        refOpenMenu={handle}
+        noTriangleIcon={props.noTriangleIcon}
+      ></PopupMenu>
+    </div>
+  );
+};
+
 export type PopupMenuProps = {
   list: string[];
-  defaultValue: string;
+  defaultValue: string | VNode<any>;
   tips?: string;
   minWidth?: string;
   maxWidth?: string;
@@ -15,6 +50,8 @@ export type PopupMenuProps = {
   handleClosed?: Function;
   noUpdateValue?: boolean;
   refOpenMenu?: PopupMenuOpenMenuProps;
+  noTriangleIcon?: boolean;
+  align?: 'left' | 'right';
 };
 
 export type PopupMenuWithButtonProps = { label: string } & PopupMenuProps;
@@ -42,6 +79,8 @@ export const PopupMenuWithButton = (props: PopupMenuWithButtonProps) => {
         handleClosed={props.handleClosed}
         noUpdateValue={props.noUpdateValue}
         refOpenMenu={handle}
+        noTriangleIcon={props.noTriangleIcon}
+        align={props.align}
       ></PopupMenu>
     </button>
   );
@@ -71,6 +110,8 @@ export const PopupMenuWithLabel = (props: PopupMenuWithLabelProps) => {
         handleClosed={props.handleClosed}
         noUpdateValue={props.noUpdateValue}
         refOpenMenu={handle}
+        noTriangleIcon={props.noTriangleIcon}
+        align={props.align}
       ></PopupMenu>
     </div>
   );
@@ -88,20 +129,22 @@ export const PopupMenu = ({
   handleClosed,
   noUpdateValue,
   refOpenMenu,
+  align = 'right',
+  noTriangleIcon,
 }: PopupMenuProps) => {
   const css: any = {
     '.popup-menu-item': {
       padding: '0 0 1px 0',
       display: 'inline-block',
       position: 'relative',
-      '.popup-menu-text': {
+      '.triangle-icon': {
         display: 'inline-block',
         cursor: 'pointer',
         whiteSpace: 'nowrap',
         marginRight: '15px',
       },
       // cover-box-shadow
-      '.popup-menu-text::after': {
+      '.triangle-icon::after': {
         content: '""',
         position: 'absolute',
         top: '50%',
@@ -125,7 +168,7 @@ export const PopupMenu = ({
         position: 'absolute',
         fontSize: 'var(--menu-font-size)',
         top: 0,
-        left: '2px',
+        width: '100px',
         color: 'var(--activatable-color-normal)',
         backgroundColor: 'var(--activatable-bg-color-normal)',
         zIndex: 'var(--layer-menu)',
@@ -152,6 +195,15 @@ export const PopupMenu = ({
           cursor: 'pointer',
         },
       },
+      '.popup-menu-list.left-align': {
+        left: '2px',
+      },
+      '.popup-menu-list.right-align': {
+        right: '2px',
+      },
+      '.popup-menu-list.open': {
+        display: 'inline-block',
+      },
     },
   };
 
@@ -163,7 +215,13 @@ export const PopupMenu = ({
     handleOpened && handleOpened();
     // console.log('=======22', event);
     isShowing = !isShowing;
-    ref.$('.popup-menu-list').style.display = isShowing ? 'inline-block' : 'none';
+    const listDom = ref.$('.popup-menu-list');
+    if (align === 'left') {
+      listDom.classList.add('left-align');
+    } else {
+      listDom.classList.add('right-align');
+    }
+    listDom.classList.toggle('open', isShowing);
     ref.$('.popup-menu-list .menu-focus').focus();
   };
   if (refOpenMenu) {
@@ -174,7 +232,7 @@ export const PopupMenu = ({
 
     // console.log('=======', event);
     isShowing = false;
-    ref.$('.popup-menu-list').style.display = 'none';
+    ref.$('.popup-menu-list').classList.remove('open');
     if (event.target) {
       if (noUpdateValue !== true) {
         ref.$('.popup-menu-item .popup-menu-text').innerText = event.target.innerText;
@@ -187,7 +245,7 @@ export const PopupMenu = ({
   };
   const onBlur = (event: any) => {
     setTimeout(() => {
-      ref.$('.popup-menu-list').style.display = 'none';
+      ref.$('.popup-menu-list').classList.remove('open');
       isShowing && handleClosed && handleClosed();
       isShowing = false;
     }, 300);
@@ -196,7 +254,9 @@ export const PopupMenu = ({
   return (
     <div ref={ref} css={css} onClick={handleClick} title={tips}>
       <div class='popup-menu-item'>
-        <span class='popup-menu-text'>{defaultValue || '&nbsp;'}</span>
+        <span class={'popup-menu-text' + (noTriangleIcon !== true ? ' triangle-icon' : '')}>
+          {defaultValue || '&nbsp;'}
+        </span>
       </div>
       <div class='popup-menu-bottom'>
         <div class='popup-menu-list'>

package/src/frames/desktop-frame.tsx

@@ -0,0 +1,80 @@
+import { VNode, CssProps, getWebVersion } from 'lupine.web';
+import { MediaQueryMaxWidth } from '../styles';
+import { MenuBar } from '../components';
+
+export interface MenuBarMenuProps {
+  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>
+  );
+};

package/src/frames/header-with-back-frame.tsx

@@ -0,0 +1,117 @@
+import { VNode, CssProps, RefProps, HtmlVar } from 'lupine.components';
+
+export const HeaderWithBackFrameHeight = '40px';
+export const HeaderWithBackFrameLeft = ({ onClick }: { onClick: (event: Event) => void }) => {
+  return (
+    <i class='ifc-icon mg-arrow_back_ios_new_outlined header-back-left-icon' onClick={(event) => onClick(event)}></i>
+  );
+};
+
+export const HeaderWithBackFrameRight = ({ onClick }: { onClick: (event: Event) => void }) => {
+  return <i class='ifc-icon ma-close header-back-right-icon' onClick={(event) => onClick(event)}></i>;
+};
+
+export const HeaderWithBackFrameEmpty = () => {
+  return <div class='header-back-top-empty'></div>;
+};
+
+export interface HeaderWithBackFrameHookProps {
+  updateTitle?: (title: string) => void;
+  updateLeft?: (left: VNode<any>) => void;
+  updateRight?: (right: VNode<any>) => void;
+}
+export const HeaderWithBackFrame = ({
+  children,
+  title,
+  onBack,
+  left,
+  right,
+  hook,
+  noHeader = false,
+}: {
+  children: VNode<any>;
+  title: string;
+  onBack: (event: Event) => void;
+  left?: VNode<any>;
+  right?: VNode<any>;
+  hook?: HeaderWithBackFrameHookProps;
+  noHeader?: boolean;
+}) => {
+  left = left || <HeaderWithBackFrameLeft onClick={onBack} />;
+  right = right || <HeaderWithBackFrameRight onClick={onBack} />;
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    height: '100%',
+    minHeight: '100%',
+    '.header-back-top': {
+      display: 'flex',
+      flexDirection: 'row',
+      width: '100vw',
+      padding: '6px 0',
+      backgroundColor: 'var(--activatable-bg-color-normal)',
+      boxShadow: '0 2px 4px var(--primary-border-color)',
+    },
+    '.header-back-content': {
+      display: 'flex',
+      flex: '1',
+      flexDirection: 'column',
+      overflowY: 'auto',
+      scrollbarWidth: 'none',
+      position: 'relative',
+      '&::-webkit-scrollbar': {
+        height: '0',
+      },
+    },
+    '.header-back-title': {
+      flex: '1',
+      color: 'var(--activatable-text-color-normal)',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    },
+    '.header-back-left, .header-back-right': {
+      // width: HeaderWithBackFrameHeight,
+      height: HeaderWithBackFrameHeight,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      fontSize: '16px',
+      padding: '0 8px',
+    },
+    '.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.updateLeft = (left: VNode<any>) => {
+      domLeft.value = left;
+    };
+    hook.updateRight = (right: VNode<any>) => {
+      domRight.value = right;
+    };
+  }
+  const domLeft = HtmlVar(left);
+  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>
+      )}
+      <div class='header-back-content'>{children}</div>
+    </div>
+  );
+};

package/src/frames/index.ts

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,85 @@
+import { VNode, CssProps, MediaQueryRange } from 'lupine.components';
+import { MobileFooterMenu, MobileFooterMenuItemProps } from '../components/mobile-components/mobile-footer-menu';
+import { MobileHeaderComponent } from '../components/mobile-components/mobile-header-component';
+
+export const ResponsiveFrame = async (
+  placeholderClassname: string,
+  title: string,
+  footerTitle: string,
+  logoUrl: string,
+  vnode: VNode<any>,
+  bottomMenu: MobileFooterMenuItemProps[]
+) => {
+  const cssContainer: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    height: '100%',
+    minHeight: '100%',
+    '.frame-top-menu': {
+      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',
+      },
+    },
+    '.content-block': {
+      display: 'flex',
+      flex: '1',
+      flexDirection: 'column',
+      overflowY: 'auto',
+      scrollbarWidth: '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'>
+      <div class='frame-top-menu'>
+        {/* <DesktopTopMenu title={title}></DesktopTopMenu> */}
+        <MobileHeaderComponent></MobileHeaderComponent>
+      </div>
+      <div class='frame-content'>
+        <div class={'content-block ' + placeholderClassname}>{vnode}</div>
+        <div class='frame-footer'>
+          <div class='footer-box'>
+            <div class='footer-cp'>{footerTitle}</div>
+          </div>
+          <MobileFooterMenu items={bottomMenu}></MobileFooterMenu>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/frames/slider-frame.tsx

@@ -0,0 +1,99 @@
+import { VNode, CssProps, RefProps } from 'lupine.web';
+import { stopPropagation } from '../lib';
+import { HtmlVar } from '../components';
+import { MediaQueryRange } from '../styles';
+
+export type SliderFramePosition = 'desktop-slide-left' | 'desktop-slide-right';
+export type SliderFrameHookProps = {
+  load?: (children: VNode<any>) => void;
+  close?: (event: Event) => void;
+  addClass?: (className: SliderFramePosition) => void;
+};
+
+export type SliderFrameProps = {
+  defaultContent?: VNode<any> | string;
+  direction?: 'right' | 'bottom';
+  hook?: SliderFrameHookProps;
+  afterClose?: () => void;
+};
+export const SliderFrame = (props: SliderFrameProps) => {
+  if (props.hook) {
+    props.hook.load = (children) => {
+      dom.value = children;
+      ref.current?.classList.remove('d-none');
+      setTimeout(() => {
+        ref.current?.classList.add('show');
+      }, 1);
+    };
+    props.hook.close = (event: Event) => {
+      stopPropagation(event);
+      ref.current?.classList.remove('show');
+      setTimeout(() => {
+        ref.current?.classList.add('d-none');
+        dom.value = '';
+        if (props.afterClose) {
+          props.afterClose();
+        }
+      }, 400);
+    };
+    props.hook.addClass = (className) => {
+      ref.current?.classList.add(className);
+    };
+  }
+  const dom = HtmlVar(<div class='slider-frame-default'>{props.defaultContent || '(No Content)'}</div>);
+  const ref: RefProps = {};
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'fixed',
+    top: '0',
+    left: '0',
+    right: '0',
+    bottom: '0',
+    zIndex: 'var(--layer-slider)',
+    transform: props.direction === 'bottom' ? 'translateY(100%)' : 'translateX(100%)',
+    transition: 'transform 0.4s ease-in-out',
+    backgroundColor: 'var(--primary-bg-color)',
+    '&.show': {
+      transform: props.direction === 'bottom' ? 'translateY(0)' : 'translateX(0)',
+    },
+    '& > fragment': {
+      height: '100%',
+    },
+    '&.desktop-slide-left': {
+      [MediaQueryRange.TabletAbove]: {
+        '.header-back-content': {
+          width: '30%',
+        },
+      },
+    },
+    '&.desktop-slide-right': {
+      [MediaQueryRange.TabletAbove]: {
+        top: '56px',
+        left: '30%',
+        transform: 'translateX(0)',
+        '.header-back-top': {
+          width: '100%',
+          boxShadow: 'unset',
+        },
+        '.header-back-content': {
+          width: '100%',
+        },
+        '.header-back-title': {
+          fontSize: '15px',
+        },
+        '.header-back-left, .header-back-right': {
+          display: 'none',
+        },
+        '&.d-none': {
+          display: 'unset !important',
+        },
+      },
+    },
+  };
+  return (
+    <div ref={ref} css={css} class='slider-frame d-none'>
+      {dom.node}
+    </div>
+  );
+};

package/src/frames/top-frame.tsx

@@ -0,0 +1,28 @@
+import { VNode, CssProps, getWebVersion } from 'lupine.web';
+
+export const TopFrame = async (placeholderClassname: string, vnode: VNode<any>) => {
+  const cssContainer: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    height: '100%',
+    position: 'relative',
+    '.top-frame-box': {
+      display: 'flex',
+      flex: '1',
+      flexDirection: 'column',
+      height: '100%',
+      // trick: to put two padding-top properties
+      'padding-top ': 'constant(safe-area-inset-top)',
+      'padding-top': 'env(safe-area-inset-top)',
+    },
+  };
+
+  console.log('Web version: ', getWebVersion());
+  return (
+    <div css={cssContainer}>
+      {/* Can't put css on this placeholder node! */}
+      <div class={'top-frame-box ' + placeholderClassname}>{vnode}</div>
+    </div>
+  );
+};

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from 'lupine.web';
 export * from './lib';
-export * from './components';
 export * from './styles';
+export * from './components';
+export * from './frames';

package/src/styles/dark-themes.ts

@@ -9,7 +9,7 @@ export const darkThemes: ThemeProps = {
   '--scrollbar-thumb-bg': '#373636',
   '--scrollbar-active-thumb-bg': '#5b5b5b',
 
-  '--primary-color': '#e5e5e5',
+  '--primary-color': '#d8d8d8',
   '--primary-color-disabled': '#7d7d7d',
   '--primary-bg-color': '#000000',
   '--primary-border-color': '#aeaeae',
@@ -62,7 +62,10 @@ export const darkThemes: ThemeProps = {
 
   '--cover-mask-bg-color': '#878a9460',
   '--cover-bg-color': '#202020',
+  // for dropdown-menu
   '--cover-box-shadow': '1px 1px 4px #c6c6c6',
+  // for big block, deeper shadow arround, good for dark theme
+  '--cover-box-shadow-around': '#ffffff 0 0 6px 1px',
 
   '--input-color': '#bdbdbd',
   '--input-bg-color': '#000000',
@@ -79,6 +82,14 @@ export const darkThemes: ThemeProps = {
   '--header-color': '#000080',
   '--header-bg-color': '#000000',
 
+  // for setting-section
+  '--ss-group-color': 'var(--primary-color)',
+  '--ss-group-bg-color': '#232323',
+  '--ss-row-btn-color': '#eee',
+  '--ss-row-btn-bg-color': '#262626',
+  '--ss-row-btn-warn-color': 'red',
+  '--mobile-header-shadow': '0px -1px 4px 1px #848484',
+
   // '--background-primary': '#353536', //	Primary background
   // '--color-primary': '#e0e0e0', //	Primary text color
   // backgroundPrimary: '', //	Primary background

package/src/styles/light-themes.ts

@@ -61,7 +61,10 @@ export const lightThemes: ThemeProps = {
 
   '--cover-mask-bg-color': '#00000060',
   '--cover-bg-color': '#f5f5f5',
+  // for dropdown-menu
   '--cover-box-shadow': '3px 3px 8px #767676',
+  // for big block, deeper shadow arround, good for dark theme
+  '--cover-box-shadow-around': '#000000 2px 4px 20px 1px',
 
   // for input, checkbox, radio box, select
   '--input-color': '#4e4e4e',
@@ -79,6 +82,14 @@ export const lightThemes: ThemeProps = {
   '--header-color': '#000080',
   '--header-bg-color': '#ffffff',
 
+  // for setting-section
+  '--ss-group-color': 'var(--primary-color)',
+  '--ss-group-bg-color': 'var(--activatable-bg-color-selected)',
+  '--ss-row-btn-color': '#eee',
+  '--ss-row-btn-bg-color': '#333',
+  '--ss-row-btn-warn-color': 'red',
+  '--mobile-header-shadow': '0 4px 4px var(--primary-border-color)',
+
   // '--po-background': '#e5e5e5', //	Background for surfaces on top of primary background
   // // backgroundSecondary: '#f5f5f5', //	Secondary background
   // // backgroundOnSecondary: '#e5e5e5', //	Background for surfaces on top of secondary background