lupine.components 1.1.56 → 1.1.58

package/package.json

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

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

@@ -3,6 +3,7 @@ import { bindGlobalStyle, getGlobalStylesId, CssProps, RefProps } from 'lupine.w
 export type RangeHookProps = {
   setValue: (val: number | [number, number]) => void;
   getValue: () => number | [number, number];
+  setDisabled?: (disabled: boolean) => void;
 };
 
 export type RangeProps = {
@@ -24,6 +25,7 @@ export type RangeProps = {
   trackColor?: string;
   fillColor?: string;
   showButtons?: boolean;
+  thumbSize?: number | string;
 };
 
 // 1. Define Static CSS completely decoupled from Reactivity (isVertical)
@@ -63,11 +65,11 @@ const rangeCss: CssProps = {
   },
   '&.horizontal .&-wrapper': {
     width: '100%',
-    height: '20px',
+    height: 'var(--range-thumb-size, 20px)',
     flex: 1,
   },
   '&.vertical .&-wrapper': {
-    width: '20px',
+    width: 'var(--range-thumb-size, 20px)',
     height: '100%',
     flex: 1,
   },
@@ -123,7 +125,7 @@ const rangeCss: CssProps = {
     transform: 'none',
   },
   '&.vertical .&-input': {
-    height: '20px',
+    height: 'var(--range-thumb-size, 20px)',
     top: '100%',
     left: 0,
     transformOrigin: '0 0',
@@ -134,8 +136,8 @@ const rangeCss: CssProps = {
     appearance: 'none',
     WebkitAppearance: 'none',
     pointerEvents: 'auto',
-    width: '20px',
-    height: '20px',
+    width: 'var(--range-thumb-size, 20px)',
+    height: 'var(--range-thumb-size, 20px)',
     backgroundColor: '#fff',
     border: '2px solid var(--range-fill-color, var(--primary-accent-color, #0a74c9))',
     borderRadius: '50%',
@@ -151,8 +153,8 @@ const rangeCss: CssProps = {
   },
   '.&-input::-moz-range-thumb': {
     pointerEvents: 'auto',
-    width: '20px',
-    height: '20px',
+    width: 'var(--range-thumb-size, 20px)',
+    height: 'var(--range-thumb-size, 20px)',
     backgroundColor: '#fff',
     border: '2px solid var(--range-fill-color, var(--primary-accent-color, #0a74c9))',
     borderRadius: '50%',
@@ -280,6 +282,9 @@ export const Range = (props: RangeProps) => {
   const customStyle: any = { ...props.style };
   if (props.trackColor) customStyle['--range-track-color'] = props.trackColor;
   if (props.fillColor) customStyle['--range-fill-color'] = props.fillColor;
+  if (props.thumbSize) {
+    customStyle['--range-thumb-size'] = typeof props.thumbSize === 'number' ? `${props.thumbSize}px` : props.thumbSize;
+  }
 
   // Evaluate the immutable hash exact ONCE for all range implementations.
   const globalCssId = getGlobalStylesId(rangeCss);
@@ -307,9 +312,10 @@ export const Range = (props: RangeProps) => {
 
   let currentVal1 = val1;
   let currentVal2 = val2;
+  let isDisabled = !!props.disabled;
 
   const adjustByStep = (direction: -1 | 1) => {
-    if (props.disabled) return;
+    if (isDisabled) return;
     if (isRangeMode) {
       let newVal = currentVal1 + direction * step;
       newVal = Math.max(min, Math.min(currentVal2, newVal));
@@ -417,7 +423,7 @@ export const Range = (props: RangeProps) => {
   };
 
   const handleContainerClick = (e: any) => {
-    if (props.disabled) return;
+    if (isDisabled) return;
     if (e.target && e.target.tagName === 'INPUT') return;
 
     const wrapper = ref.$('.&-wrapper') as HTMLElement;
@@ -461,6 +467,7 @@ export const Range = (props: RangeProps) => {
   };
 
   const handleInput = (e: Event, isThumb2: boolean) => {
+    if (isDisabled) return;
     let val = parseFloat((e.target as HTMLInputElement).value);
 
     // Magnetic snapping
@@ -496,6 +503,7 @@ export const Range = (props: RangeProps) => {
   };
 
   const handleChange = () => {
+    if (isDisabled) return;
     if (props.onChange) {
       if (isRangeMode) {
         props.onChange([currentVal1, currentVal2]);
@@ -522,6 +530,21 @@ export const Range = (props: RangeProps) => {
       updateVisuals();
     };
     props.hook.getValue = () => (isRangeMode ? [currentVal1, currentVal2] : currentVal1);
+    props.hook.setDisabled = (disabled: boolean) => {
+      isDisabled = disabled;
+      const container = (ref.current as HTMLElement) || (ref.$?.('.&-container') as HTMLElement);
+      if (container) {
+        if (disabled) {
+          container.classList.add('disabled');
+        } else {
+          container.classList.remove('disabled');
+        }
+      }
+      const inputs = ref.$all?.('.&-input') as NodeListOf<HTMLInputElement>;
+      inputs?.forEach?.((input) => {
+        input.disabled = disabled;
+      });
+    };
   }
 
   const ref: RefProps & { onUnload?: (el: Element) => Promise<void> | void } = {
@@ -563,7 +586,7 @@ export const Range = (props: RangeProps) => {
 
   return (
     <div
-      class={[globalCssId, '&-container', props.class, props.disabled ? 'disabled' : '', isVertical ? 'vertical' : 'horizontal']
+      class={[globalCssId, '&-container', props.class, isDisabled ? 'disabled' : '', isVertical ? 'vertical' : 'horizontal']
         .join(' ')
         .trim()}
       ref={ref}
@@ -588,7 +611,7 @@ export const Range = (props: RangeProps) => {
                 value={val1}
                 onInput={(e) => handleInput(e, false)}
                 onChange={handleChange}
-                disabled={props.disabled}
+                disabled={isDisabled}
               />
               <input
                 type='range'
@@ -599,7 +622,7 @@ export const Range = (props: RangeProps) => {
                 value={val2}
                 onInput={(e) => handleInput(e, true)}
                 onChange={handleChange}
-                disabled={props.disabled}
+                disabled={isDisabled}
               />
             </>
           ) : (
@@ -612,7 +635,7 @@ export const Range = (props: RangeProps) => {
               value={val1}
               onInput={(e) => handleInput(e, false)}
               onChange={handleChange}
-              disabled={props.disabled}
+              disabled={isDisabled}
             />
           )}
 

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

@@ -11,6 +11,7 @@ export type ActionSheetColorPickerProps = {
   /** Show the 16 preset color swatches. Default: true */
   showPresets?: boolean;
   zIndex?: string;
+  colorList?: string[];
 };
 
 function hexToRgb(hex: string): [number, number, number] {
@@ -55,6 +56,7 @@ export const ActionSheetColorPicker = async ({
   cancelButtonText = 'Cancel',
   showPresets = true,
   zIndex,
+  colorList = PRESET_COLORS,
 }: ActionSheetColorPickerProps): Promise<string | undefined> => {
   let [r, g, b] = hexToRgb(value);
 
@@ -238,7 +240,7 @@ export const ActionSheetColorPicker = async ({
         </div>
         {showPresets && (
           <div class='presets'>
-            {PRESET_COLORS.map((hex) => (
+            {colorList.map((hex) => (
               <div
                 class='preset-dot'
                 style={{ backgroundColor: hex }}

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

@@ -1,8 +1,13 @@
-// import { NotificationColor, NotificationMessage, updateTheme, PopupMenuWithIcon, CssProps } from 'lupine.components';
+// import { NotificationColor, NotificationMessage, updateTheme, PopupMenuWithIcon, CssProps } from "lupine.components";
 import { CssProps } from 'lupine.components';
 import { MobileSideMenuHelper } from './mobile-side-menu';
 
-export const MobileTopSysIcon = () => {
+export interface MobileTopSysIconProps {
+  icon?: string;
+}
+
+export const MobileTopSysIcon = (props: MobileTopSysIconProps = {}) => {
+  const icon = props?.icon || 'bs-list';
   const css: CssProps = {
     cursor: 'pointer',
     display: 'flex',
@@ -20,7 +25,7 @@ export const MobileTopSysIcon = () => {
   };
   return (
     <div css={css} onClick={() => MobileSideMenuHelper.show()} class='mobile-top-sys-icon'>
-      <i class='ifc-icon bs-list'></i>
+      <i class={`ifc-icon ${icon}`}></i>
     </div>
   );
 };

package/src/components/notice-message.tsx

@@ -1,4 +1,5 @@
 import { CssProps, bindGlobalStyle } from 'lupine.web';
+import { isSafeAreaSupported } from '../lib/support-safe-area';
 /**
 How to use:
   Notification.sendMessage(message);
@@ -56,6 +57,8 @@ export class NotificationMessage {
       padding: '0 10px',
       zIndex: 'var(--layer-notice)',
       pointerEvents: 'none',
+      'padding-top ': isSafeAreaSupported() ? 'constant(safe-area-inset-top)' : '',
+      'padding-top': isSafeAreaSupported() ? 'env(safe-area-inset-top)' : '',
       '>div': {
         pointerEvents: 'auto',
         color: 'var(--notice-color-with-bg)',

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%',
+    overflow: 'hidden',
+    position: 'relative',
+    boxSizing: 'border-box',
+
+    '.slide-tab-c-nav': {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: 'var(--card-bg, #ffffff)',
+      borderBottom: '0.5px solid var(--card-border, rgba(60, 60, 67, 0.15))',
+      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',
+      alignItems: 'center',
+      gap: '8px',
+      flexShrink: 0,
+      paddingRight: '16px',
+    },
+    '.slide-tab-c-nav-item': {
+      cursor: 'pointer',
+      padding: '7px 16px',
+      borderRadius: '20px',
+      fontSize: '13px',
+      fontWeight: 600,
+      color: 'var(--text-secondary, #8e8e93)',
+      backgroundColor: 'var(--bg-container, #f2f2f7)',
+      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, #0284c7)',
+      color: '#ffffff',
+      boxShadow: '0 2px 8px rgba(2, 132, 199, 0.35)',
+    },
+
     '.slide-tab-c-list': {
       flex: 1,
-      borderRadius: '6px',
       display: 'flex',
+      flexDirection: 'row',
       overflowX: 'auto',
+      overflowY: 'hidden',
       width: '100%',
+      height: '100%',
       scrollSnapType: 'x mandatory',
-      gap: '8px',
-      paddingBottom: '10px',
       scrollBehavior: 'smooth',
       WebkitOverflowScrolling: 'touch',
+      boxSizing: 'border-box',
+      scrollbarWidth: 'none',
+      '&::-webkit-scrollbar': { display: 'none' },
     },
     '.slide-tab-c-slide': {
       width: '100%',
-      overflow: 'hidden',
-      position: 'relative',
       minWidth: '100%',
+      maxWidth: '100%',
       flexShrink: 0,
-      scrollSnapAlign: 'start',
       height: '100%',
       overflowY: 'auto',
-    },
-
-    '.slide-tab-c-nav': {
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'center',
-      backgroundColor: 'var(--primary-bg-color)',
-      position: 'sticky',
-      top: 0,
-      zIndex: 1,
-    },
-    '.slide-tab-c-nav-wrap': {
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'center',
-      padding: '2px 4px',
-      borderRadius: '4px',
-      backgroundColor: 'var(--secondary-bg-color)',
-    },
-    '.slide-tab-c-nav-item': {
-      cursor: 'pointer',
-      padding: '4px 8px',
-      borderRadius: '4px',
-      marginRight: '8px',
-    },
-    '.slide-tab-c-nav-item.active': {
-      backgroundColor: 'var(--primary-accent-color)',
-      color: 'white',
+      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;
-    }
-    const target = children[slideIndex];
-    if (!target) {
-      return;
+    if (currentScrollIndex !== slideIndex && currentScrollIndex >= 0 && currentScrollIndex < props.pages.length) {
+      slideIndex = currentScrollIndex;
+      resetSlides(slideIndex);
     }
-    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>