lupine.components 1.1.57 → 1.1.59

package/src/components/slide-tab-component.tsx

@@ -1,130 +1,209 @@
 import { CssProps, RefProps, VNode, bindGlobalStyle } from 'lupine.components';
 
+export interface SlideTabHookProps {
+  moveTo?: (index: number) => void;
+  getIndex?: () => number;
+}
+
+export interface SlideTabPage {
+  id?: string;
+  title: string;
+  content: VNode<any> | any;
+}
+
 export interface SlideTabProps {
-  pages: { title: string; content: VNode<any> }[];
+  pages: SlideTabPage[];
+  hook?: SlideTabHookProps;
+  initialIndex?: number;
+  onChange?: (index: number, page: SlideTabPage) => void;
+  navClass?: string;
+  class?: string;
 }
+
 export const SlideTabComponent = (props: SlideTabProps) => {
   const css: CssProps = {
     display: 'flex',
     flexDirection: 'column',
     flex: 1,
-    fontSize: '12px',
-    borderRadius: '6px',
-    padding: '0px 8px 4px 8px',
-    // marginBottom: '8px',
+    width: '100%',
     height: '100%',
-    '.slide-tab-c-list': {
-      flex: 1,
-      borderRadius: '6px',
-      display: 'flex',
-      overflowX: 'auto',
-      width: '100%',
-      scrollSnapType: 'x mandatory',
-      gap: '8px',
-      paddingBottom: '10px',
-      scrollBehavior: 'smooth',
-      WebkitOverflowScrolling: 'touch',
-    },
-    '.slide-tab-c-slide': {
-      width: '100%',
-      overflow: 'hidden',
-      position: 'relative',
-      minWidth: '100%',
-      flexShrink: 0,
-      scrollSnapAlign: 'start',
-      height: '100%',
-      overflowY: 'auto',
-    },
+    overflow: 'hidden',
+    position: 'relative',
+    boxSizing: 'border-box',
 
     '.slide-tab-c-nav': {
       display: 'flex',
       flexDirection: 'row',
-      justifyContent: 'center',
+      alignItems: 'center',
       backgroundColor: 'var(--primary-bg-color)',
-      position: 'sticky',
-      top: 0,
-      zIndex: 1,
+      borderBottom: '1px solid var(--secondary-border-color)',
+      padding: '10px 16px 8px 16px',
+      overflowX: 'auto',
+      WebkitOverflowScrolling: 'touch',
+      flexShrink: 0,
+      zIndex: 10,
+      scrollbarWidth: 'none',
+      '&::-webkit-scrollbar': { display: 'none' },
     },
     '.slide-tab-c-nav-wrap': {
       display: 'flex',
       flexDirection: 'row',
-      justifyContent: 'center',
-      padding: '2px 4px',
-      borderRadius: '4px',
-      backgroundColor: 'var(--secondary-bg-color)',
+      alignItems: 'center',
+      gap: '8px',
+      flexShrink: 0,
+      paddingRight: '16px',
     },
     '.slide-tab-c-nav-item': {
       cursor: 'pointer',
-      padding: '4px 8px',
-      borderRadius: '4px',
-      marginRight: '8px',
+      padding: '7px 16px',
+      borderRadius: '20px',
+      fontSize: '13px',
+      fontWeight: 600,
+      color: 'var(--secondary-color)',
+      backgroundColor: 'var(--secondary-bg-color)',
+      whiteSpace: 'nowrap',
+      transition: 'all 0.18s ease',
+      WebkitTapHighlightColor: 'transparent',
+      flexShrink: 0,
+      userSelect: 'none',
+      WebkitUserSelect: 'none',
+      '&:active': {
+        transform: 'scale(0.96)',
+        opacity: 0.85,
+      },
     },
     '.slide-tab-c-nav-item.active': {
       backgroundColor: 'var(--primary-accent-color)',
-      color: 'white',
+      color: '#ffffff',
+      boxShadow: '0 2px 8px rgba(2, 132, 199, 0.35)',
+    },
+
+    '.slide-tab-c-list': {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'row',
+      overflowX: 'auto',
+      overflowY: 'hidden',
+      width: '100%',
+      height: '100%',
+      scrollSnapType: 'x mandatory',
+      scrollBehavior: 'smooth',
+      WebkitOverflowScrolling: 'touch',
+      boxSizing: 'border-box',
+      scrollbarWidth: 'none',
+      '&::-webkit-scrollbar': { display: 'none' },
+    },
+    '.slide-tab-c-slide': {
+      width: '100%',
+      minWidth: '100%',
+      maxWidth: '100%',
+      flexShrink: 0,
+      height: '100%',
+      overflowY: 'auto',
+      position: 'relative',
+      scrollSnapAlign: 'start',
+      scrollSnapStop: 'always',
+      WebkitOverflowScrolling: 'touch',
+      boxSizing: 'border-box',
+      scrollbarWidth: 'none',
+      '&::-webkit-scrollbar': { display: 'none' },
     },
   };
   bindGlobalStyle('slide-tab-c-box', css);
 
   const ref: RefProps = {};
-  let slideIndex = 0;
+  let slideIndex = props.initialIndex || 0;
   let manualScroll = false;
-  let scrollEndTimer: NodeJS.Timeout | null = null;
-  const drawerScroll = () => {
-    if (manualScroll) {
-      return;
-    }
-    if (scrollEndTimer) {
-      clearTimeout(scrollEndTimer);
-    }
-    scrollEndTimer = setTimeout(() => {
-      drawerScrollStop();
-    }, 100);
-  };
+  let scrollEndTimer: any = null;
+
   const resetSlides = (index: number) => {
-    const dots = ref.$all('.slide-tab-c-nav-item');
-    for (let i = 0; i < dots.length; i++) {
-      dots[i].classList.toggle('active', i === index);
+    const dots = ref.$all?.('.slide-tab-c-nav-item');
+    if (dots) {
+      for (let i = 0; i < dots.length; i++) {
+        dots[i].classList.toggle('active', i === index);
+      }
+      dots[index]?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+    }
+    if (props.onChange && props.pages[index]) {
+      props.onChange(index, props.pages[index]);
     }
   };
+
   const drawerScrollStop = () => {
-    const drawer = ref.$('.slide-tab-c-list');
+    const drawer = ref.$?.('.slide-tab-c-list') as HTMLElement | undefined;
+    if (!drawer) return;
     const width = drawer.clientWidth;
+    if (width <= 0) return;
     const currentScrollIndex = Math.round(drawer.scrollLeft / width);
-    slideIndex = currentScrollIndex;
-    resetSlides(slideIndex);
-  };
-  const moveSlide = (slideIndex: number) => {
-    const drawer = ref.$('.slide-tab-c-list');
-    const children = ref.$all('.slide-tab-c-slide');
-    if (!drawer || !children || children.length === 0) {
-      return;
+    if (currentScrollIndex !== slideIndex && currentScrollIndex >= 0 && currentScrollIndex < props.pages.length) {
+      slideIndex = currentScrollIndex;
+      resetSlides(slideIndex);
     }
-    const target = children[slideIndex];
-    if (!target) {
-      return;
-    }
-    const offsetLeft = target.offsetLeft;
+  };
+
+  const drawerScroll = () => {
+    if (manualScroll) return;
+    if (scrollEndTimer) clearTimeout(scrollEndTimer);
+    scrollEndTimer = setTimeout(() => {
+      drawerScrollStop();
+    }, 60);
+  };
+
+  const moveSlide = (targetIndex: number) => {
+    const drawer = ref.$?.('.slide-tab-c-list') as HTMLElement | undefined;
+    if (!drawer) return;
+    const width = drawer.clientWidth;
+    if (width <= 0) return;
+
     manualScroll = true;
+    slideIndex = targetIndex;
+    resetSlides(slideIndex);
+
     drawer.scrollTo({
-      left: offsetLeft,
+      left: targetIndex * width,
       behavior: 'smooth',
     });
 
-    resetSlides(slideIndex);
     setTimeout(() => {
       manualScroll = false;
-    }, 300);
+    }, 350);
+  };
+
+  if (props.hook) {
+    props.hook.moveTo = moveSlide;
+    props.hook.getIndex = () => slideIndex;
+  }
+
+  ref.onLoad = async () => {
+    const drawer = ref.$?.('.slide-tab-c-list') as HTMLElement | undefined;
+    if (drawer) {
+      drawer.addEventListener('scrollend', drawerScrollStop);
+    }
+    if (slideIndex > 0) {
+      setTimeout(() => {
+        moveSlide(slideIndex);
+      }, 50);
+    }
+  };
+
+  ref.onUnload = async () => {
+    const drawer = ref.$?.('.slide-tab-c-list') as HTMLElement | undefined;
+    if (drawer) {
+      drawer.removeEventListener('scrollend', drawerScrollStop);
+    }
+    if (scrollEndTimer) {
+      clearTimeout(scrollEndTimer);
+    }
   };
 
   return (
-    <section class='slide-tab-c-box' ref={ref}>
-      <div class='slide-tab-c-nav'>
-        <div class='slide-tab-c-nav-wrap'>
+    <section class={`slide-tab-c-box ${props.class || ''}`} ref={ref}>
+      <div class={`slide-tab-c-nav no-scrollbar-container ${props.navClass || ''}`}>
+        <div class="slide-tab-c-nav-wrap">
           {props.pages.map((page, index) => (
             <div
-              class={`slide-tab-c-nav-item ${index === 0 ? 'active' : ''}`}
-              onClick={(event) => {
+              class={`slide-tab-c-nav-item ${index === slideIndex ? 'active' : ''}`}
+              onClick={(event: any) => {
                 event.preventDefault();
                 moveSlide(index);
               }}
@@ -134,9 +213,9 @@ export const SlideTabComponent = (props: SlideTabProps) => {
           ))}
         </div>
       </div>
-      <div class='slide-tab-c-list no-scrollbar-container' onScroll={drawerScroll}>
+      <div class="slide-tab-c-list no-scrollbar-container" onScroll={drawerScroll}>
         {props.pages.map((page) => (
-          <div class='slide-tab-c-slide no-scrollbar-container'>{page.content}</div>
+          <div class="slide-tab-c-slide no-scrollbar-container">{page.content}</div>
         ))}
       </div>
     </section>

package/src/demo/demo-frame-helper.tsx

@@ -54,6 +54,7 @@ import { searchInputDemo } from '../component-pool/search-input';
 import { hEditorDemo } from '../component-pool/h-editor';
 import { pagingLinkDemo } from '../components/paging-link-demo';
 import { slideTabDemo } from '../components/slide-tab-component-demo';
+import { slidePageDemo } from '../components/slide-page-component-demo';
 import { qrcodeDemo } from '../component-pool/qrcode';
 import { iEditorDemo } from '../component-pool/i-editor';
 import { youtubePlayerDemo } from '../component-pool/youtube-player';
@@ -336,6 +337,12 @@ export class DemoFrameHelper {
           url: '',
           js: () => this.addPanel(slideTabDemo.text, <DemoPage story={slideTabDemo} />),
         },
+        {
+          id: slidePageDemo.id,
+          text: slidePageDemo.text,
+          url: '',
+          js: () => this.addPanel(slidePageDemo.text, <DemoPage story={slidePageDemo} />),
+        },
         {
           id: pagingLinkDemo.id,
           text: pagingLinkDemo.text,

package/src/demo/demo-registry.ts

@@ -52,6 +52,7 @@ import { searchInputDemo } from '../component-pool/search-input';
 import { pagingLinkDemo } from '../components/paging-link-demo';
 import { hEditorDemo } from '../component-pool/h-editor';
 import { slideTabDemo } from '../components/slide-tab-component-demo';
+import { slidePageDemo } from '../components/slide-page-component-demo';
 import { qrcodeDemo } from '../component-pool/qrcode';
 import { iEditorDemo } from '../component-pool/i-editor';
 import { youtubePlayerDemo } from '../component-pool/youtube-player';
@@ -125,6 +126,7 @@ export const demoRegistry: Record<string, DemoStory<any>> = {
   [pagingLinkDemo.id]: pagingLinkDemo,
   [hEditorDemo.id]: hEditorDemo,
   [slideTabDemo.id]: slideTabDemo,
+  [slidePageDemo.id]: slidePageDemo,
   [qrcodeDemo.id]: qrcodeDemo,
   [iEditorDemo.id]: iEditorDemo,
   [youtubePlayerDemo.id]: youtubePlayerDemo,

package/src/frames/responsive-frame.tsx

@@ -38,7 +38,6 @@ export const ResponsiveFrame = (props: ResponsiveFrameProps) => {
     margin: '0 auto',
     overflowX: 'hidden',
     ...(!props.noSafeAreaTop ? {
-      'padding-top ': isSafeAreaSupported() ? 'constant(safe-area-inset-top)' : '',
       'padding-top': isSafeAreaSupported() ? 'env(safe-area-inset-top)' : '',
     } : {}),
     '.frame-top-menu': {

package/src/frames/slider-frame-demo.tsx

@@ -24,6 +24,7 @@ export const sliderFrameDemo: DemoStory<any> = {
   text: 'Slider Frame Demo',
   args: {
     direction: 'right',
+    addBottomSafearea: false,
   },
   argTypes: {
     direction: {
@@ -31,6 +32,10 @@ export const sliderFrameDemo: DemoStory<any> = {
       options: ['right', 'bottom'],
       description: 'Direction the slider enters from',
     },
+    addBottomSafearea: {
+      control: 'boolean',
+      description: 'Add safe area padding at bottom',
+    },
   },
   render: (args) => {
     const sliderHook: SliderFrameHookProps = {};
@@ -54,6 +59,7 @@ export const sliderFrameDemo: DemoStory<any> = {
               let close: SliderHelperCloseProps;
               close = await SliderHelper.show({
                 direction: args.direction,
+                addBottomSafearea: args.addBottomSafearea,
                 children: (
                   <HeaderWithBackFrame title='Slider Helper Inner Page' onBack={() => close()}>
                     <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
@@ -71,7 +77,12 @@ export const sliderFrameDemo: DemoStory<any> = {
         </div>
 
         {/* The SliderFrame is placed here but initially hidden */}
-        <SliderFrame hook={sliderHook} direction={args.direction} defaultContent='' />
+        <SliderFrame
+          hook={sliderHook}
+          direction={args.direction}
+          addBottomSafearea={args.addBottomSafearea}
+          defaultContent=''
+        />
       </div>
     );
   },

package/src/frames/slider-frame.tsx

@@ -27,6 +27,7 @@ export type SliderFrameProps = {
   hook?: SliderFrameHookProps;
   afterClose?: () => void | Promise<void>;
   maxWidth?: string;
+  addBottomSafearea?: boolean;
 };
 export const SliderFrame = (props: SliderFrameProps) => {
   let closeSlider: SliderHelperCloseProps | undefined;
@@ -39,6 +40,7 @@ export const SliderFrame = (props: SliderFrameProps) => {
         direction: props.direction || 'right',
         children,
         maxWidth: props.maxWidth,
+        addBottomSafearea: props.addBottomSafearea ?? false,
         closeEvent: () => {
           opened = false;
           closeSlider = undefined;

package/src/frames/slider-helper.tsx

@@ -16,6 +16,7 @@ export type SliderHelperShowProps = {
   className?: string;
   contentClassName?: string;
   mountTarget?: HTMLElement;
+  addBottomSafearea?: boolean;
 };
 
 export class SliderHelper {
@@ -29,6 +30,7 @@ export class SliderHelper {
     className = '',
     contentClassName = '',
     mountTarget,
+    addBottomSafearea = false,
   }: SliderHelperShowProps): Promise<SliderHelperCloseProps> {
     const base = document.createElement('div');
     const isHorizontal = direction === 'left' || direction === 'right';
@@ -157,8 +159,12 @@ export class SliderHelper {
         transform: startTransform,
         transition: 'transform 0.4s ease-in-out',
         // trick: to put two padding-top properties
-        'padding-top ': isSafeAreaSupported() ? 'constant(safe-area-inset-top)' : '0',
         'padding-top': isSafeAreaSupported() ? 'env(safe-area-inset-top)' : '0',
+        ...(addBottomSafearea
+          ? {
+              'padding-bottom': isSafeAreaSupported() ? 'env(safe-area-inset-bottom)' : '0',
+            }
+          : {}),
         ...contentCss,
         '&::-webkit-scrollbar': {
           display: 'none',

package/src/frames/top-frame.tsx

@@ -28,7 +28,6 @@ export const TopFrame = async ({
       // trick: to put two padding-top properties
       ...(!noSafeAreaTop
         ? {
-          'padding-top ': isSafeAreaSupported() ? 'constant(safe-area-inset-top)' : '',
           'padding-top': isSafeAreaSupported() ? 'env(safe-area-inset-top)' : '',
         }
         : {}),