lupine.components 1.1.29 → 1.1.31

package/package.json

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

package/src/component-pool/i-editor/i-editor-demo.tsx

@@ -2,7 +2,7 @@ import { CssProps, RefProps } from 'lupine.web';
 import { DemoStory } from '../../demo/demo-types';
 import { IEditor } from './i-editor';
 
-const IEditorDemoPage = () => {
+export const IEditorDemoPage = () => {
   let editor: IEditor | undefined;
 
   const ref: RefProps = {

package/src/component-pool/p-editor/p-editor-demo.tsx

@@ -3,7 +3,7 @@ import { DemoStory } from '../../demo/demo-types';
 import { PEditor } from './p-editor';
 import { PEditorOptions } from './p-editor-types';
 
-const PEditorDemoPage = (props: { args: PEditorOptions }) => {
+export const PEditorDemoPage = (props: { args: PEditorOptions }) => {
   let editor: PEditor | undefined;
 
   const ref: RefProps = {

package/src/component-pool/range/gauge.tsx

@@ -8,8 +8,8 @@ export type GaugeHighlightRange = {
 };
 
 export type GaugeHookProps = {
-  setValue: (val: number | [number, number]) => void;
-  getValue: () => number | [number, number];
+  setValue?: (val: number | [number, number]) => void;
+  getValue?: () => number | [number, number];
 };
 
 export type GaugeProps = {

package/src/components/action-sheet-date.tsx

@@ -1,12 +1,16 @@
-import { CssProps, RefProps } from 'lupine.web';
+import { CssProps, RefProps, VNode } from 'lupine.web';
+import { HtmlVar } from './html-var';
 import { ActionSheet, ActionSheetCloseProps, ActionSheetCloseReasonProps } from './action-sheet';
 
 export type ActionSheetDatePickerOrder = 'YMD' | 'DMY';
+export type ActionSheetDatePickerFormat = 'YMD' | 'MD' | 'D';
 
 export type ActionSheetDatePickerProps = {
-  /** Initial date value. Format: "YYYY-MM-DD" */
+  /** Initial date value. Format depends on format prop, defaults to "YYYY-MM-DD" */
   value?: string;
   title?: string;
+  /** Format of the picker. Default: 'YMD' */
+  format?: ActionSheetDatePickerFormat;
   /** Column order. Default: 'YMD' (Year | Month | Day) */
   order?: ActionSheetDatePickerOrder;
   /** Month labels. Defaults to English month names. Length determines month count. */
@@ -35,6 +39,7 @@ const PAD = Math.floor(VISIBLE / 2); // 2 rows of padding above/below
 export const ActionSheetDatePicker = async ({
   value = '',
   title = '',
+  format = 'YMD',
   order = 'YMD',
   months = DEFAULT_MONTHS,
   yearRange = 100,
@@ -44,7 +49,21 @@ export const ActionSheetDatePicker = async ({
 }: ActionSheetDatePickerProps): Promise<string | undefined> => {
   // Parse initial date
   const today = new Date();
-  const parts = value.match(/^(\d{4})-(\d{2})-(\d{2})$/) ?? [];
+
+  let parts: string[] = [];
+  if (format === 'MD') {
+    parts = value.match(/^(\d{2})-(\d{2})$/) ?? [];
+    parts.unshift(''); // Shift empty year so indices [1]/[2] match month/day fallback logic below
+    parts.unshift(''); // Padding to push match groups to [2][3]
+  } else if (format === 'D') {
+    parts = value.match(/^(\d{2})$/) ?? [];
+    parts.unshift('');
+    parts.unshift('');
+    parts.unshift(''); // Push match group to [3]
+  } else {
+    parts = value.match(/^(\d{4})-(\d{2})-(\d{2})$/) ?? [];
+  }
+
   const initialYear = parts[1] ? parseInt(parts[1], 10) : today.getFullYear();
   const initialMonth = parts[2] ? parseInt(parts[2], 10) : today.getMonth() + 1;
   const initialDay = parts[3] ? parseInt(parts[3], 10) : today.getDate();
@@ -60,15 +79,27 @@ export const ActionSheetDatePicker = async ({
     const monthRef: RefProps = {};
     const dayRef: RefProps = {};
 
-    const getIdx = (colRef: RefProps) => Math.round((colRef.current as HTMLElement).scrollTop / ITEM_H);
+    const getIdx = (colRef: RefProps) => {
+      if (!colRef.current) return 0;
+      return Math.round((colRef.current as HTMLElement).scrollTop / ITEM_H);
+    };
 
     const onConfirm = () => {
       const year = START_YEAR + getIdx(yearRef);
       const month = 1 + getIdx(monthRef);
       const day = 1 + getIdx(dayRef);
-      const result = [String(year).padStart(4, '0'), String(month).padStart(2, '0'), String(day).padStart(2, '0')].join(
-        '-'
-      );
+
+      let result = '';
+      if (format === 'D') {
+        result = String(day).padStart(2, '0');
+      } else if (format === 'MD') {
+        result = [String(month).padStart(2, '0'), String(day).padStart(2, '0')].join('-');
+      } else {
+        result = [String(year).padStart(4, '0'), String(month).padStart(2, '0'), String(day).padStart(2, '0')].join(
+          '-'
+        );
+      }
+
       resolve(result);
       handleClose('confirm');
     };
@@ -80,7 +111,7 @@ export const ActionSheetDatePicker = async ({
      * Build a scrollable column.
      * Carousel pattern: scroll to item's offsetTop on load; read scrollTop on confirm.
      */
-    const buildColumn = (labels: string[], initialIdx: number, colRef: RefProps) => {
+    const buildColumn = (labels: string[], initialIdx: number, colRef: RefProps, onScroll?: () => void) => {
       colRef.onLoad = async () => {
         const el = colRef.current as HTMLElement;
         const items = el.querySelectorAll('.dp-item');
@@ -91,7 +122,7 @@ export const ActionSheetDatePicker = async ({
       };
 
       return (
-        <div class='col' ref={colRef}>
+        <div class='col' ref={colRef} onScroll={onScroll}>
           {Array.from({ length: PAD }, (_, i) => (
             <div class='dp-pad' key={`t${i}`} />
           ))}
@@ -107,18 +138,104 @@ export const ActionSheetDatePicker = async ({
       );
     };
 
+    const buildDynamicColumn = (labelsVar: HtmlVar, initialIdx: number, colRef: RefProps) => {
+      colRef.onLoad = async () => {
+        const el = colRef.current as HTMLElement;
+        const items = el.querySelectorAll('.dp-item');
+        if (items[initialIdx]) {
+          el.scrollTop = (items[initialIdx] as HTMLElement).offsetTop - PAD * ITEM_H;
+        }
+      };
+
+      return (
+        <div class='col' ref={colRef}>
+          {labelsVar.node}
+        </div>
+      );
+    };
+
+    const generateDaysDOM = (maxDays: number) => {
+      const labels = Array.from({ length: maxDays }, (_, i) => String(i + 1).padStart(2, '0'));
+      return (
+        <>
+          {Array.from({ length: PAD }, (_, i) => (
+            <div class='dp-pad' key={`t${i}`} />
+          ))}
+          {labels.map((label: string, i: number) => (
+            <div class='dp-item' key={i}>
+              {label}
+            </div>
+          ))}
+          {Array.from({ length: PAD }, (_, i) => (
+            <div class='dp-pad' key={`b${i}`} />
+          ))}
+        </>
+      );
+    };
+
+    const getMaxDays = (year: number, month: number) => {
+      if (format === 'D') return 31;
+      if (format === 'MD') return new Date(2000, month, 0).getDate(); // Leap year forced max
+      return new Date(year, month, 0).getDate();
+    };
+
+    let currentMaxDays = 0;
+    let scrollTimeout: any;
+    const handleDateScroll = () => {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        // Read current selected year and month based on scroll heights
+        const curYear = format === 'MD' ? 2000 : START_YEAR + getIdx(yearRef);
+        const curMonth = 1 + getIdx(monthRef);
+
+        // Calculate the maximum allowed days for this selection
+        const maxDays = getMaxDays(curYear, curMonth);
+
+        // If the number of days changed, update the reactive var
+        if (currentMaxDays !== maxDays) {
+          currentMaxDays = maxDays;
+          daysVar.value = generateDaysDOM(maxDays);
+
+          // If the currently selected day is now out of bounds (e.g. Feb 30th), clamp it down.
+          const currentDayIdx = getIdx(dayRef);
+          if (currentDayIdx >= maxDays) {
+            setTimeout(() => {
+              if (dayRef.current) {
+                const el = dayRef.current as HTMLElement;
+                const items = el.querySelectorAll('.dp-item');
+                const targetItem = items[maxDays - 1] as HTMLElement;
+                if (targetItem) {
+                  el.scrollTo({ top: targetItem.offsetTop - PAD * ITEM_H, behavior: 'smooth' });
+                }
+              }
+            }, 50);
+          }
+        }
+      }, 150);
+    };
+
     const years = Array.from({ length: YEAR_COUNT }, (_, i) => String(START_YEAR + i));
-    const days = Array.from({ length: 31 }, (_, i) => String(i + 1).padStart(2, '0'));
 
     const initialYearIdx = Math.max(0, Math.min(YEAR_COUNT - 1, initialYear - START_YEAR));
     const initialMonthIdx = Math.max(0, Math.min(months.length - 1, initialMonth - 1));
-    const initialDayIdx = Math.max(0, Math.min(30, initialDay - 1));
+    currentMaxDays = getMaxDays(START_YEAR + initialYearIdx, initialMonthIdx + 1);
 
-    const yearCol = buildColumn(years, initialYearIdx, yearRef);
-    const monthCol = buildColumn(months, initialMonthIdx, monthRef);
-    const dayCol = buildColumn(days, initialDayIdx, dayRef);
+    // Day array is reactive, max based on initial selection constraints
+    const daysVar = new HtmlVar(generateDaysDOM(currentMaxDays));
+    const initialDayIdx = Math.max(0, Math.min(currentMaxDays - 1, initialDay - 1));
 
-    const orderedCols = order === 'DMY' ? [dayCol, monthCol, yearCol] : [yearCol, monthCol, dayCol];
+    const yearCol = buildColumn(years, initialYearIdx, yearRef, handleDateScroll);
+    const monthCol = buildColumn(months, initialMonthIdx, monthRef, handleDateScroll);
+    const dayCol = buildDynamicColumn(daysVar, initialDayIdx, dayRef);
+
+    let orderedCols: any[] = [];
+    if (format === 'D') {
+      orderedCols = [dayCol];
+    } else if (format === 'MD') {
+      orderedCols = order === 'DMY' ? [dayCol, monthCol] : [monthCol, dayCol];
+    } else {
+      orderedCols = order === 'DMY' ? [dayCol, monthCol, yearCol] : [yearCol, monthCol, dayCol];
+    }
 
     const pickerBodyCss: CssProps = {
       borderTop: '1px solid var(--primary-border-color)',
@@ -162,11 +279,7 @@ export const ActionSheetDatePicker = async ({
 
     const pickerBody = (
       <div css={pickerBodyCss}>
-        <div class='picker-body'>
-          {orderedCols[0]}
-          {orderedCols[1]}
-          {orderedCols[2]}
-        </div>
+        <div class='picker-body'>{orderedCols}</div>
       </div>
     );
 

package/src/components/action-sheet-demo.tsx

@@ -5,6 +5,7 @@ import {
   ActionSheetMessage,
   ActionSheetInput,
   ActionSheetSelectOptionsProps,
+  ActionSheetSelectWrapPromise,
 } from './action-sheet';
 import { ActionSheetTimePicker } from './action-sheet-time';
 import { ActionSheetDatePicker } from './action-sheet-date';
@@ -84,6 +85,18 @@ export const actionSheetDemo: DemoStory<any> = {
             });
           }}
         />
+        <Button
+          text='Show Action Sheet Wrap Select'
+          size={ButtonSize.Medium}
+          onClick={async () => {
+            const days = Array.from({ length: 31 }, (_, i) => String(i + 1));
+            const result = await ActionSheetSelectWrapPromise({
+              title: 'Select a Day',
+              options: days,
+            });
+            if (result >= 0) console.log('Wrap Select picked:', days[result]);
+          }}
+        />
         <Button
           text='Show Time Picker (HH:mm)'
           size={ButtonSize.Medium}
@@ -132,6 +145,30 @@ export const actionSheetDemo: DemoStory<any> = {
             if (result) console.log('Date selected (DMY):', result);
           }}
         />
+        <Button
+          text='Show Date Picker (Month-Day)'
+          size={ButtonSize.Medium}
+          onClick={async () => {
+            const result = await ActionSheetDatePicker({
+              title: 'Pick Month and Day',
+              value: '02-24',
+              format: 'MD',
+            });
+            if (result) console.log('Date selected (MD):', result);
+          }}
+        />
+        <Button
+          text='Show Date Picker (Day Only)'
+          size={ButtonSize.Medium}
+          onClick={async () => {
+            const result = await ActionSheetDatePicker({
+              title: 'Pick a Day',
+              value: '24',
+              format: 'D',
+            });
+            if (result) console.log('Date selected (D):', result);
+          }}
+        />
         <Button
           text='Show Color Picker'
           size={ButtonSize.Medium}

package/src/components/action-sheet.tsx

@@ -141,6 +141,29 @@ export class ActionSheet {
           marginTop: 'unset',
           maxWidth: 'unset',
         },
+        '.act-sheet-wrap-container': {
+          display: 'flex',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '16px',
+        },
+        '.act-sheet-wrap-item': {
+          cursor: 'pointer',
+          padding: '8px',
+          borderRadius: '8px',
+          border: '1px solid var(--primary-border-color)',
+          margin: '4px',
+          width: 'calc(25% - 8px)',
+          minWidth: '60px',
+          textAlign: 'center',
+          transition: 'all 0.3s ease',
+        },
+        '.act-sheet-wrap-item:hover': {
+          fontWeight: 'bold',
+          backgroundColor: 'var(--primary-bg-color-hover, rgba(0,0,0,0.04))',
+        },
       },
     };
     const component = (
@@ -448,6 +471,46 @@ export const ActionSheetSelectPromise = async ({
   });
 };
 
+export const ActionSheetSelectWrapPromise = async ({
+  title,
+  contentMaxWidth,
+  contentMaxHeight,
+  options = ActionSheetSelectOptionsProps.Ok,
+  closeWhenClickOutside = true,
+  cancelButtonText = 'Cancel',
+  zIndex,
+}: ActionSheetSelectPromiseProps): Promise<number> => {
+  return new Promise(async (resolve, reject) => {
+    const handleClicked = async (index: number, close: ActionSheetCloseProps) => {
+      resolve(index);
+      close('select');
+    };
+    const closeEvent = (reason?: ActionSheetCloseReasonProps) => {
+      if (reason !== 'select') {
+        resolve(-1);
+      }
+    };
+    const handleClose = await ActionSheet.show({
+      title,
+      children: (
+        <div class='act-sheet-wrap-container'>
+          {options.map((option, index) => (
+            <div class='act-sheet-wrap-item' key={index} onClick={() => handleClicked(index, handleClose)}>
+              {option}
+            </div>
+          ))}
+        </div>
+      ),
+      contentMaxWidth,
+      contentMaxHeight,
+      cancelButtonText,
+      closeEvent,
+      closeWhenClickOutside,
+      zIndex,
+    });
+  });
+};
+
 export type ActionSheetMultiSelectPromiseProps = {
   title: string | VNode<any>;
   contentMaxWidth?: string;

package/src/components/html-var.tsx

@@ -8,6 +8,7 @@ export class HtmlVar implements HtmlVarResult {
   private _ref: RefProps;
   private resolve!: () => void;
   private promise: Promise<void>;
+  private updatePromise: Promise<void> | null = null;
 
   constructor(initial?: HtmlVarValueProps) {
     this.promise = new Promise<void>((res) => {
@@ -28,10 +29,23 @@ export class HtmlVar implements HtmlVarResult {
   }
 
   private async update(): Promise<void> {
-    const v = typeof this._value === 'function' ? await this._value() : this._value;
-    await this._ref.mountInnerComponent!(v);
-    this._dirty = false;
-    this._value = '';
+    if (this.updatePromise) {
+      return this.updatePromise;
+    }
+
+    this.updatePromise = (async () => {
+      while (this._dirty) {
+        this._dirty = false;
+        const v = typeof this._value === 'function' ? await this._value() : this._value;
+        await this._ref.mountInnerComponent!(v);
+        if (!this._dirty) {
+          this._value = '';
+        }
+      }
+    })();
+
+    await this.updatePromise;
+    this.updatePromise = null;
   }
 
   // need to wait before use ref.current

package/src/components/index.ts

@@ -1,12 +1,18 @@
+export * from './action-sheet-color';
+export * from './action-sheet-date';
+export * from './action-sheet-time';
 export * from './action-sheet';
 export * from './button-push-animation';
 export * from './button';
+export * from './desktop-footer';
+export * from './desktop-header';
 export * from './drag-refresh';
 export * from './editable-label';
 export * from './float-window';
 export * from './grid';
 export * from './html-load';
 export * from './html-var';
+export * from './input-number';
 export * from './input-with-title';
 export * from './link-item';
 export * from './link-list';

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

@@ -82,7 +82,7 @@ export const MobileHeaderComponent = (props: any) => {
     width: '100%',
     height: 'auto',
     // padding: '2px 0',
-    // boxShadow: 'var(--mobile-header-shadow)', // 第二项 2px 的话，顶部有阴影（线）
+    // boxShadow: 'var(--mobile-header-shadow)', // if 2px, then there is a shadow (line) on the top
     '& > *': {
       height: '100%',
     },

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

@@ -59,6 +59,7 @@ export const MobileHeaderTitleIcon = ({
     color: color || 'var(--primary-color)',
     background: background || 'var(--activatable-bg-color-normal)',
     boxShadow: noShadow ? 'unset' : 'var(--mobile-header-shadow)',
+    position: 'relative',
     zIndex: 'var(--layer-inside)', // bring boxShadow to front
     '.mhti-title': {
       display: 'flex',

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

@@ -1,9 +1,9 @@
-import { backActionHelper, CssProps, RefProps, VNode } from 'lupine.components';
+import { backActionHelper, CssProps, RefProps, VNode, MediaQueryRange } from 'lupine.components';
 
 export class MobileSideMenuHelper {
   static show() {
     const ref = document.querySelector('.mobile-side-menu-mask') as HTMLDivElement;
-    if (!ref) return;
+    if (!ref || ref.clientWidth > 100) return;
 
     ref.classList.add('show');
 
@@ -170,7 +170,7 @@ export class MobileSideMenuHelper {
     });
   }
 }
-export const MobileSideMenu = (props: { children: VNode<any> }) => {
+export const MobileSideMenu = (props: { children: VNode<any>; autoExtend?: boolean }) => {
   const css: CssProps = {
     '.mobile-side-menu-mask': {
       display: 'none',
@@ -206,10 +206,26 @@ export const MobileSideMenu = (props: { children: VNode<any> }) => {
       overflowY: 'auto',
       transform: 'translateX(-100%)',
       boxShadow: 'var(--cover-box-shadow)',
-      // trick: to put two padding-top properties
       'padding-top ': 'constant(safe-area-inset-top)',
       'padding-top': 'env(safe-area-inset-top)',
     },
+    [MediaQueryRange.TabletAbove]: {
+      '&.auto-extend .mobile-side-menu-mask': {
+        display: 'flex !important',
+        width: 'var(--auto-sidemenu-left-offset, 260px)',
+        right: 'auto',
+        backgroundColor: 'transparent !important',
+        pointerEvents: 'none',
+      },
+      '&.auto-extend .mobile-side-menu': {
+        transform: 'translateX(0) !important',
+        width: '100%',
+        maxWidth: 'unset',
+        boxShadow: 'none',
+        borderRight: '1px solid var(--primary-border-color)',
+        pointerEvents: 'auto',
+      },
+    },
   };
 
   const onClickContainer = (event: Event) => {
@@ -226,7 +242,7 @@ export const MobileSideMenu = (props: { children: VNode<any> }) => {
     },
   };
   return (
-    <div css={css} ref={ref}>
+    <div css={css} ref={ref} class={['mobile-side-menu-top', props.autoExtend ? 'auto-extend' : ''].join(' ').trim()}>
       {/* <SliderFrame hook={props.sliderFrameHook} /> */}
       <div class='mobile-side-menu-mask' onClick={onClickContainer}>
         <div class='mobile-side-menu'>{props.children}</div>

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

@@ -19,7 +19,7 @@ export const MobileTopSysIcon = () => {
     },
   };
   return (
-    <div css={css} onClick={() => MobileSideMenuHelper.show()}>
+    <div css={css} onClick={() => MobileSideMenuHelper.show()} class='mobile-top-sys-icon'>
       <i class='ifc-icon bs-list'></i>
     </div>
   );

package/src/components/toggle-base.tsx

@@ -23,6 +23,7 @@ export type ToggleBaseProps = {
   hook?: ToggleBaseHookProps;
   noToggle?: boolean; // if true, it will be like a button
   children: VNode<any>;
+  className?: string;
 };
 export const ToggleBase = (props: ToggleBaseProps) => {
   const applyToggle = (checked: boolean, disabled: boolean) => {
@@ -70,6 +71,7 @@ export const ToggleBase = (props: ToggleBaseProps) => {
   }
 
   const css: CssProps = {
+    display: 'inline-block',
     '.toggle-base-box, .toggle-base-container': {
       position: 'relative',
       width: `100%`,
@@ -91,7 +93,7 @@ export const ToggleBase = (props: ToggleBaseProps) => {
         width: `${typeof props.size.w === 'number' ? props.size.w + 'px' : props.size.w}`,
         height: `${typeof props.size.h === 'number' ? props.size.h + 'px' : props.size.h}`,
       }}
-      class='toggle-base-component'
+      class={['toggle-base-component', props.className].join(' ').trim()}
     >
       <label class='toggle-base-box'>
         <div class='toggle-base-container'>{props.children}</div>
@@ -192,6 +194,7 @@ export type TogglePlayButtonProps = {
   textColor?: string;
   backgroundColor?: string;
   noWave?: boolean;
+  className?: string;
 };
 export const TogglePlayButton = (props: TogglePlayButtonProps) => {
   const css: CssProps = {
@@ -258,6 +261,7 @@ export type ToggleButtonProps = {
   checked?: boolean;
   onClick?: (checked: boolean) => void;
   hook?: ToggleBaseHookProps;
+  className?: string;
 };
 export const ToggleButton = (props: ToggleButtonProps) => {
   const css: CssProps = {
@@ -350,6 +354,7 @@ export type ToggleIconProps = {
   onClick?: (checked: boolean) => void;
   hook?: ToggleBaseHookProps;
   noToggle?: boolean; // if true, it will be like a button
+  className?: string;
 };
 export const ToggleIcon = (props: ToggleIconProps) => {
   const css: CssProps = {
@@ -421,7 +426,7 @@ export const ToggleIcon = (props: ToggleIconProps) => {
   };
   bindGlobalStyle('toggle-icon-component', css);
   const iconStyle = {
-    fontSize: typeof props.size.h === 'number' ? `${Number((props.size.h * 0.55).toFixed(2))}px` : '1rem',
+    fontSize: typeof props.size.h === 'number' ? `${Number((props.size.h * 0.75).toFixed(2))}px` : '1rem',
     padding: props.size.padding || '4px 12px',
   };
 

package/src/demo/mock/side-menu-mock.tsx

@@ -55,7 +55,7 @@ const sideMenuMockCss: CssProps = {
     justifyContent: 'space-between',
   },
   '.msm-footer-cfg .msm-item': {
-    padding: '12px 0px',
+    padding: '12px',
   },
   '.msm-footer-version': {
     textAlign: 'center',

package/src/frames/index.ts

@@ -1,3 +1,3 @@
 export * from './responsive-frame';
-export * from './top-frame';
 export * from './slider-frame';
+export * from './top-frame';

package/src/frames/responsive-frame.tsx

@@ -15,10 +15,12 @@ export interface ResponsiveFrameProps {
   mainContent: VNode<any>;
   desktopHeaderTitle: string;
   desktopFooterTitle?: string;
-  desktopTopMenu: IconMenuItemProps[];
-  mobileBottomMenu: IconMenuItemProps[];
+  desktopTopMenu?: IconMenuItemProps[];
+  mobileBottomMenu?: IconMenuItemProps[];
   mobileSideMenuContent: VNode<any>;
   sharedContents: VNode<any>;
+  maxWidth?: string;
+  autoExtendSidemenu?: boolean;
 }
 export const ResponsiveFrame = (props: ResponsiveFrameProps) => {
   const cssContainer: CssProps = {
@@ -27,6 +29,11 @@ export const ResponsiveFrame = (props: ResponsiveFrameProps) => {
     width: '100%',
     height: '100%',
     minHeight: '100%',
+    maxWidth: props.maxWidth || '',
+    borderRight: props.maxWidth ? '1px solid var(--primary-border-color)' : 'none',
+    borderLeft: props.maxWidth ? '1px solid var(--primary-border-color)' : 'none',
+    margin: '0 auto',
+    overflowX: 'hidden',
     '.frame-top-menu': {
       display: 'flex',
       flexDirection: 'column',
@@ -56,26 +63,48 @@ export const ResponsiveFrame = (props: ResponsiveFrameProps) => {
     '.content-block .padding-block': {
       padding: '0 16px',
     },
+    [MediaQueryRange.DesktopAbove]: {
+      // for big screens, remove the shadow on the top of mobile header
+      '.mobile-header-title-icon-top': {
+        boxShadow: 'unset',
+      },
+    },
     [MediaQueryRange.TabletBelow]: {
       '.frame-footer .d-footer-box, .frame-top-menu .desktop-menu-box': {
         display: 'none',
       },
     },
+    [MediaQueryRange.TabletAbove]: {
+      transform: 'translateX(0)', // Traps position: fixed children inside this container's dimensions
+      '&.auto-extend': {
+        '--auto-sidemenu-left-offset': '260px',
+        paddingLeft: 'var(--auto-sidemenu-left-offset)',
+        boxSizing: 'border-box',
+      },
+      '.mobile-top-sys-icon': {
+        display: 'none',
+      },
+    },
   };
 
   return (
-    <div css={cssContainer} class='responsive-frame'>
+    <div
+      css={cssContainer}
+      class={['responsive-frame', props.autoExtendSidemenu ? 'auto-extend' : ''].join(' ').trim()}
+    >
       {props.sharedContents}
       <div class='frame-top-menu'>
-        <DesktopHeader title={props.desktopHeaderTitle} items={props.desktopTopMenu}></DesktopHeader>
+        {props.desktopTopMenu && (
+          <DesktopHeader title={props.desktopHeaderTitle} items={props.desktopTopMenu}></DesktopHeader>
+        )}
         <MobileHeaderComponent></MobileHeaderComponent>
       </div>
       <div class='frame-content'>
-        <MobileSideMenu>{props.mobileSideMenuContent}</MobileSideMenu>
+        <MobileSideMenu autoExtend={props.autoExtendSidemenu}>{props.mobileSideMenuContent}</MobileSideMenu>
         <div class={'content-block ' + props.placeholderClassname}>{props.mainContent}</div>
         <div class='frame-footer'>
           {props.desktopFooterTitle && <DesktopFooter title={props.desktopFooterTitle}></DesktopFooter>}
-          <MobileFooterMenu items={props.mobileBottomMenu}></MobileFooterMenu>
+          {props.mobileBottomMenu && <MobileFooterMenu items={props.mobileBottomMenu}></MobileFooterMenu>}
         </div>
       </div>
     </div>

package/src/frames/slider-frame.tsx

@@ -14,6 +14,8 @@
 */
 import { VNode, CssProps, HtmlVar, RefProps, stopPropagation, MediaQueryRange } from 'lupine.components';
 
+// addClass(SliderFramePosition) is used to show two SliderFrames for big screens,
+// so when the second is showing, it needs to set this on the first one
 export type SliderFramePosition = 'desktop-slide-left' | 'desktop-slide-right';
 export type SliderFrameHookProps = {
   load?: (children: VNode<any>) => void;
@@ -62,7 +64,7 @@ export const SliderFrame = (props: SliderFrameProps) => {
     flexDirection: 'column',
     position: 'fixed',
     top: '0',
-    left: '0',
+    left: 'var(--auto-sidemenu-left-offset, 0px)',
     right: '0',
     bottom: '0',
     zIndex: 'var(--layer-slider)',
@@ -75,8 +77,12 @@ export const SliderFrame = (props: SliderFrameProps) => {
     '&.show': {
       transform: props.direction === 'bottom' ? 'translateY(0)' : 'translateX(0)',
     },
+    '& > *': {
+      '--auto-sidemenu-left-offset': '0px',
+    },
     '& > fragment': {
       height: '100%',
+      '--auto-sidemenu-left-offset': '0px',
     },
     '&.desktop-slide-left': {
       [MediaQueryRange.TabletAbove]: {
@@ -87,8 +93,8 @@ export const SliderFrame = (props: SliderFrameProps) => {
     },
     '&.desktop-slide-right': {
       [MediaQueryRange.TabletAbove]: {
-        top: '59px',
-        left: '30%',
+        top: '59px', // Just below DesktopHeader
+        left: 'calc(max(var(--auto-sidemenu-left-offset, 0px), 30%))',
         transform: 'translateX(0)',
         // notice: here is connected with mobile-header-title-icon.tsx
         '.mobile-header-title-icon-top': {