lupine.components 1.0.12 → 1.0.14

package/package.json

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

package/src/components/html-var.tsx

@@ -1,4 +1,4 @@
-import { RefProps, VNode, mountComponents } from 'lupine.web';
+import { RefProps, VNode, mountComponents, replaceInnerhtml } from 'lupine.web';
 
 export type HtmlVarResult = { value: string | VNode<any>; ref: RefProps; node: VNode<any> };
 export const HtmlVar = (initial?: string | VNode<any>): HtmlVarResult => {
@@ -9,7 +9,8 @@ export const HtmlVar = (initial?: string | VNode<any>): HtmlVarResult => {
     if (typeof value === 'object' && value.type && value.props) {
       await mountComponents(ref.current, value);
     } else {
-      ref.current.innerHTML = value;
+      await replaceInnerhtml(ref.current, value as string);
+      // ref.current.innerHTML = value;
     }
     _dirty = false;
   };

package/src/components/menu-item-props.tsx

@@ -1,8 +1,10 @@
 export type MenuItemProps = {
+  id: string;
   text: string; // "-" for break line
   url: string;
   js?: () => void;
   alt?: string;
+  hide?: boolean;
 };
 
 export type NestMenuItemProps = MenuItemProps & {

package/src/components/menu-sidebar.tsx

@@ -31,7 +31,7 @@ export const MenuSidebar = ({
   maxWidthMobileMenu = MediaQueryMaxWidth.TabletMax,
 }: MenuSidebarProps) => {
   const css: CssProps = {
-    backgroundColor,
+    // backgroundColor,
     '.menu-sidebar-top': {
       width: '100%',
       backgroundColor: 'var(--sidebar-bg-color)',
@@ -45,9 +45,9 @@ export const MenuSidebar = ({
       justifyContent: 'center',
       flexDirection: 'column',
     },
-    '&.mobile .menu-sidebar-top': {
-      position: 'absolute',
-    },
+    // '&.mobile .menu-sidebar-top': {
+    //   position: 'absolute',
+    // },
     '.menu-sidebar-item': {
       display: 'inline-block',
       color,
@@ -112,7 +112,7 @@ export const MenuSidebar = ({
     '.menu-sidebar-mobile': {
       display: 'none',
       position: 'relative',
-      backgroundColor: 'var(--primary-bg-color)',
+      // backgroundColor: 'var(--primary-bg-color)',
       padding: '5px 4px 6px',
       '.menu-sidebar-toggle': {
         cursor: 'pointer',
@@ -165,13 +165,30 @@ export const MenuSidebar = ({
       '&.mobile': {
         display: 'block',
       },
+      '&.mobile.open': {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        top: 0,
+        left: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: '#ccccccc2',
+        zIndex: 'var(--layer-sidebar)',
+      },
       '.menu-sidebar-top': {
         display: 'none',
       },
       '.menu-sidebar-top.open': {
         display: 'flex',
         flexDirection: 'column',
-        zIndex: 'var(--layer-sidebar)',
+        // left: 0,
+        // top: 0,
+        flex: 1,
+        overflowY: 'auto',
+        paddingTop: '200px',
+        width: '200px',
+        marginLeft: 'unset',
       },
       '.menu-sidebar-top.open .menu-sidebar-sub-box > .menu-sidebar-sub': {
         display: 'flex',
@@ -201,6 +218,9 @@ export const MenuSidebar = ({
     return (
       <div class={className}>
         {items.map((item) => {
+          if (item.hide === true) {
+            return null;
+          }
           let ref: RefProps = {};
           return item.items ? (
             <div ref={ref} class='menu-sidebar-sub-box' onClick={() => onItemToggleClick(ref)}>
@@ -215,14 +235,14 @@ export const MenuSidebar = ({
               onClick={(event) => {
                 stopPropagation(event);
                 // hide menu
-                onToggleClick();
+                onToggleClick(event);
                 item.js && item.js();
               }}
             >
               {item.text}
             </a>
           ) : (
-            <a class='menu-sidebar-item' href={item.url} alt={item.alt || item.text}>
+            <a class='menu-sidebar-item' href={item.url} alt={item.alt || item.text} target='_blank'>
               {item.text}
             </a>
           );
@@ -232,25 +252,27 @@ export const MenuSidebar = ({
   };
 
   const ref: RefProps = {
-    onLoad: async () => {
-      if (menuId) {
-        const menu = await fetchMenu(menuId);
-        if (menu.result.items.length > 0) {
-          const items = menu.result.items.map((i: any) => {
-            const l = i.split('\t');
-            return { text: l[5], url: l[4] };
-          });
-          const newDom = renderItems(items, 'menu-sidebar-top');
-          //mountComponents('.menu-sidebar-top', newDom);
-        }
-      }
-    },
+    // onLoad: async () => {
+    //   if (menuId) {
+    //     const menu = await fetchMenu(menuId);
+    //     if (menu.result.items.length > 0) {
+    //       const items = menu.result.items.map((i: any) => {
+    //         const l = i.split('\t');
+    //         return { text: l[5], url: l[4] };
+    //       });
+    //       const newDom = renderItems(items, 'menu-sidebar-top');
+    //       //mountComponents('.menu-sidebar-top', newDom);
+    //     }
+    //   }
+    // },
   };
-  const onToggleClick = () => {
+  const onToggleClick = (event: Event) => {
+    event.stopPropagation();
     const menu = ref.$('.menu-sidebar-mobile .menu-sidebar-toggle');
     menu.classList.toggle('active');
     const topMenu = ref.$('.menu-sidebar-top');
     topMenu.classList.toggle('open');
+    ref.current.classList.toggle('open');
   };
   const onItemToggleClick = (ref: RefProps) => {
     // if (event.target != ref.current && (event.target as any).parentNode != ref.current) {
@@ -266,16 +288,21 @@ export const MenuSidebar = ({
   const newCss: CssProps =
     (!desktopMenu && !mobileMenu) || (desktopMenu && mobileMenu)
       ? {
-          ['@media only screen and (max-width: ' + maxWidthMobileMenu + ')']: {
+        ['@media only screen and (max-width: ' + maxWidthMobileMenu + ')']: {
+          display: 'block',
+          '.menu-sidebar-top': {
             display: 'block',
-            '.menu-sidebar-top': {
-              display: 'block',
-            },
           },
-        }
+        },
+      }
       : {};
+  const onMaskClick = (event: MouseEvent) => {
+    if (ref.current.classList.contains('open')) {
+      onToggleClick(event);
+    }
+  };
   return (
-    <div css={newCss} ref={ref} class={['menu-sidebar-box', className, mobileMenu ? 'mobile' : ''].join(' ')}>
+    <div css={newCss} ref={ref} class={['menu-sidebar-box', className, mobileMenu ? 'mobile' : ''].join(' ')} onClick={onMaskClick}>
       <div class='menu-sidebar-mobile'>
         <div class='menu-sidebar-toggle' onClick={onToggleClick}>
           <span></span>

package/src/components/tabs.tsx

@@ -1,11 +1,12 @@
 import { RefProps, VNode, mountComponents } from 'lupine.web';
 import { stopPropagation } from '../lib';
 
-export type TabsUpdateProps = {
+export type TabsHookProps = {
   updateTitle?: (index: number, title: string) => void;
   updateIndex?: (index: number) => void;
   newPage?: (title: string, page: VNode<any>, index?: number) => Promise<void>;
   removePage?: (index: number) => void;
+  // set from outside and called when the active tab index changes
   indexChanged?: (index: number) => void;
   getIndex?: () => number;
   getCount?: () => number;
@@ -19,10 +20,10 @@ export type TabsProps = {
   defaultIndex?: number;
   topClassName?: string;
   pagePadding?: string;
-  refUpdate?: TabsUpdateProps;
+  hook?: TabsHookProps;
 };
 // For CSS or query selectors, please pay attention to that Tabs can be nested
-export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, refUpdate }: TabsProps) => {
+export const Tabs = ({ pages, defaultIndex, topClassName, pagePadding, hook: refUpdate }: TabsProps) => {
   const ref: RefProps = {};
   let newIndex = typeof defaultIndex === 'number' ? defaultIndex : 0;
   const clearIndex = () => {

package/src/frames/desktop-frame.tsx

@@ -1,8 +1,9 @@
-import { VNode, CssProps, getWebVersion } from 'lupine.web';
+import { VNode, CssProps } from 'lupine.web';
 import { MediaQueryMaxWidth } from '../styles';
 import { MenuBar } from '../components';
 
 export interface MenuBarMenuProps {
+  id: string;
   text: string;
   url: string;
 }
@@ -65,7 +66,7 @@ export const DesktopFrame = async (
         </div>
         <div class='header-title'>
           {title}
-          <div class='header-subtitle pt-s'>{'ver: ' + getWebVersion()}</div>
+          {/* <div class='header-subtitle pt-s'>{'ver: ' + getWebVersion()}</div> */}
         </div>
       </div>
       <MenuBar items={menu} maxWidthMobileMenu={'800px'} maxWidth={MediaQueryMaxWidth.DesktopMax}></MenuBar>

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

@@ -1,117 +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>
-  );
-};
+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/responsive-frame.tsx

@@ -1,85 +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>
-  );
-};
+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

@@ -1,99 +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>
-  );
-};
+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

@@ -1,4 +1,4 @@
-import { VNode, CssProps, getWebVersion } from 'lupine.web';
+import { VNode, CssProps } from 'lupine.web';
 
 export const TopFrame = async (placeholderClassname: string, vnode: VNode<any>) => {
   const cssContainer: CssProps = {
@@ -18,7 +18,7 @@ export const TopFrame = async (placeholderClassname: string, vnode: VNode<any>)
     },
   };
 
-  console.log('Web version: ', getWebVersion());
+  // console.log('Web version: ', getWebVersion());
   return (
     <div css={cssContainer}>
       {/* Can't put css on this placeholder node! */}