lupine.components 1.1.42 → 1.1.43

package/package.json

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

package/src/component-pool/charts/chart-utils.ts

@@ -20,8 +20,9 @@ declare global {
 export const chartCommonCss: CssProps = {
   position: 'relative',
   width: '100%',
-  height: '100%',
-  minHeight: '200px', // Default min height
+  height: 'auto',
+  minHeight: '0', // Default min height
+  maxHeight: '100%',
   display: 'flex',
   flexDirection: 'column',
 

package/src/component-pool/youtube-player/youtube-player.tsx

@@ -94,7 +94,7 @@ export const YouTubePlayer = (props: YouTubePlayerProps) => {
   }
 
   return (
-    <div class={className} css={{ position: 'relative', width, height, ...style }}>
+    <div class={className} css={{ position: 'relative', width, height, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', ...style }}>
       {src ? (
         <iframe
           width='100%'
@@ -104,7 +104,7 @@ export const YouTubePlayer = (props: YouTubePlayerProps) => {
           frameBorder='0'
           allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
           allowFullScreen={allowFullScreen}
-          style={{ border: 'none', display: 'block' }}
+          style={{ border: 'none', display: 'block', aspectRatio: '16 / 9', height: 'auto', maxHeight: '100%' }}
         ></iframe>
       ) : (
         <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f0f0f0', color: '#999', border: '1px solid #ddd' }}>

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

@@ -10,6 +10,7 @@ import {
 import { ActionSheetTimePicker } from './action-sheet-time';
 import { ActionSheetDatePicker } from './action-sheet-date';
 import { ActionSheetColorPicker } from './action-sheet-color';
+import { ActionSheetThemePicker } from './action-sheet-theme';
 import { Button, ButtonSize } from './button';
 
 export const actionSheetDemo: DemoStory<any> = {
@@ -180,6 +181,17 @@ export const actionSheetDemo: DemoStory<any> = {
             if (result) console.log('Color selected:', result);
           }}
         />
+        <Button
+          text='Show Theme Picker'
+          size={ButtonSize.Medium}
+          onClick={async () => {
+            const result = await ActionSheetThemePicker({
+              title: 'Pick a theme variable',
+              value: 'var(--primary-color)',
+            });
+            if (result) console.log('Theme variable selected:', result);
+          }}
+        />
       </div>
     );
   },

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

@@ -0,0 +1,150 @@
+import { CssProps, getCurrentTheme } from 'lupine.web';
+import { ActionSheet, ActionSheetCloseProps, ActionSheetCloseReasonProps } from './action-sheet';
+
+export type ActionSheetThemePickerProps = {
+  value?: string;
+  title?: string;
+  cancelButtonText?: string;
+  zIndex?: string;
+};
+
+const getThemeVarNameFromValue = (value: string) => {
+  const match = String(value || '').match(/var\((--[^),\s]+)/);
+  return match ? match[1] : '';
+};
+
+const getThemeValue = (themes: any, themeName: string, key: string) => {
+  const themeValue = themes?.[themeName]?.[key];
+  if (themeValue !== undefined) return String(themeValue);
+
+  const fallbackThemeName = Object.keys(themes || {})[0];
+  const fallbackValue = themes?.[fallbackThemeName]?.[key];
+  return fallbackValue !== undefined ? String(fallbackValue) : '';
+};
+
+const getThemeItems = () => {
+  const { themeName, themes } = getCurrentTheme();
+  const keys = new Set<string>();
+
+  Object.values(themes || {}).forEach((theme: any) => {
+    Object.keys(theme || {}).forEach((key) => {
+      if (key.startsWith('--')) keys.add(key);
+    });
+  });
+
+  return Array.from(keys)
+    .sort()
+    .map((key) => ({
+      key,
+      value: getThemeValue(themes, themeName, key),
+    }));
+};
+
+export const ActionSheetThemePicker = async ({
+  value = '',
+  title = 'Select Theme Variable',
+  cancelButtonText = 'Cancel',
+  zIndex,
+}: ActionSheetThemePickerProps): Promise<string | undefined> => {
+  return new Promise(async (resolve) => {
+    let handleClose: ActionSheetCloseProps;
+    const selectedKey = getThemeVarNameFromValue(value);
+    const items = getThemeItems();
+
+    const closeEvent = (reason?: ActionSheetCloseReasonProps) => {
+      if (reason !== 'confirm') resolve(undefined);
+    };
+
+    const css: CssProps = {
+      borderTop: '1px solid var(--primary-border-color)',
+      overflow: 'hidden',
+      '.theme-list': {
+        maxHeight: '60vh',
+        overflowY: 'auto',
+        padding: '8px 0',
+      },
+      '.theme-empty': {
+        padding: '24px 16px',
+        textAlign: 'center',
+        color: 'var(--secondary-color, #888)',
+        fontSize: '13px',
+      },
+      '.theme-item': {
+        display: 'grid',
+        gridTemplateColumns: '28px minmax(0, 1fr) auto',
+        alignItems: 'center',
+        gap: '10px',
+        padding: '9px 14px',
+        cursor: 'pointer',
+        borderBottom: '1px solid var(--primary-border-color)',
+        color: 'var(--primary-color)',
+        '&:hover': {
+          backgroundColor: 'var(--activatable-bg-color-hover, rgba(0,0,0,0.06))',
+        },
+      },
+      '.theme-item-selected': {
+        backgroundColor: 'var(--activatable-bg-color-selected, rgba(24,144,255,0.12))',
+      },
+      '.theme-swatch': {
+        width: '22px',
+        height: '22px',
+        borderRadius: '50%',
+        border: '1px solid var(--primary-border-color)',
+        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.08)',
+      },
+      '.theme-key': {
+        minWidth: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        fontFamily: 'monospace',
+        fontSize: '13px',
+      },
+      '.theme-value': {
+        maxWidth: '160px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        color: 'var(--secondary-color, #888)',
+        fontFamily: 'monospace',
+        fontSize: '12px',
+      },
+    };
+
+    const pickerBody = (
+      <div css={css}>
+        <div class='theme-list'>
+          {items.length === 0 && <div class='theme-empty'>No theme variables found.</div>}
+          {items.map((item) => {
+            const result = `var(${item.key})`;
+            return (
+              <div
+                class={`theme-item ${item.key === selectedKey ? 'theme-item-selected' : ''}`}
+                title={`${item.key}: ${item.value}`}
+                onClick={() => {
+                  resolve(result);
+                  handleClose('confirm');
+                }}
+              >
+                <div class='theme-swatch' style={{ background: result }} />
+                <div class='theme-key'>{item.key}</div>
+                <div class='theme-value'>{item.value}</div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+
+    handleClose = await ActionSheet.show({
+      title,
+      children: pickerBody,
+      contentMaxHeight: '70vh',
+      closeEvent,
+      closeWhenClickOutside: true,
+      zIndex,
+      cancelButtonText,
+      buttonsPosition: 'header',
+    });
+  });
+};

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './action-sheet-color';
 export * from './action-sheet-date';
+export * from './action-sheet-theme';
 export * from './action-sheet-time';
 export * from './action-sheet';
 export * from './button-push-animation';

package/src/components/menu-sidebar.tsx

@@ -100,7 +100,7 @@ export const MenuSidebar = ({
     '.menu-sidebar-sub-box.open > .menu-sidebar-item::after': {
       transform: 'rotate(0deg)',
     },
-    '&.mobile .menu-sidebar-sub-box > .menu-sidebar-item::after': {
+    '&.mobile .menu-sidebar-sub-box.open > .menu-sidebar-item::after': {
       transform: 'rotate(0deg)',
     },
     // '.menu-sidebar-sub-box .menu-sidebar-sub > .menu-sidebar-item': {
@@ -170,15 +170,17 @@ export const MenuSidebar = ({
         display: 'block',
       },
       '&.mobile.open': {
-        position: 'absolute',
+        position: 'fixed',
+        inset: 0,
         width: '100%',
         height: '100%',
+        minHeight: '100dvh',
         top: 0,
         left: 0,
         display: 'flex',
         flexDirection: 'column',
         backgroundColor: '#ccccccc2',
-        zIndex: 'var(--layer-sidebar)',
+        zIndex: 'var(--layer-menu-sub)',
       },
       '.menu-sidebar-top': {
         display: 'none',
@@ -195,7 +197,7 @@ export const MenuSidebar = ({
         marginLeft: 'unset',
         justifyContent: 'start',
       },
-      '.menu-sidebar-top.open .menu-sidebar-sub-box > .menu-sidebar-sub': {
+      '.menu-sidebar-top.open .menu-sidebar-sub-box.open > .menu-sidebar-sub': {
         display: 'flex',
         position: 'unset',
         '.menu-sidebar-item': {
@@ -230,7 +232,7 @@ export const MenuSidebar = ({
             }
             let ref: RefProps = {};
             return item.items ? (
-              <div ref={ref} class={`menu-sidebar-sub-box ${defaultOpenAll ? 'open' : ''}`} onClick={() => onItemToggleClick(ref)}>
+              <div ref={ref} class={`menu-sidebar-sub-box ${defaultOpenAll ? 'open' : ''}`} onClick={(event) => onItemToggleClick(event, ref)}>
                 <div class='menu-sidebar-item'>{item.text}</div>
                 {renderItems(item.items, 'menu-sidebar-sub')}
               </div>
@@ -241,8 +243,10 @@ export const MenuSidebar = ({
                 alt={item.alt || item.text}
                 onClick={(event) => {
                   stopPropagation(event);
-                  // hide menu
-                  onToggleClick(event);
+                  // hide menu only when the mobile overlay is open
+                  if (ref.current?.classList.contains('open')) {
+                    onToggleClick(event);
+                  }
                   item.js && item.js();
                 }}
               >
@@ -280,17 +284,23 @@ export const MenuSidebar = ({
     const topMenu = ref.$('.menu-sidebar-top');
     topMenu.classList.toggle('open');
     const isOpen = ref.current.classList.toggle('open');
-    
+
     if (isOpen) {
+      if (ref.current.classList.contains('mobile')) {
+        ref.current.querySelectorAll('.menu-sidebar-sub-box').forEach((item: Element) => {
+          item.classList.add('open');
+        });
+      }
       ref.current.setAttribute('data-back-action', backActionHelper.genBackActionId());
     } else {
       ref.current.removeAttribute('data-back-action');
     }
   };
-  const onItemToggleClick = (ref: RefProps) => {
-    // if (event.target != ref.current && (event.target as any).parentNode != ref.current) {
-    //   return;
-    // }
+  const onItemToggleClick = (event: Event, ref: RefProps) => {
+    stopPropagation(event);
+    if (event.target != ref.current && (event.target as any).parentNode != ref.current) {
+      return;
+    }
     ref.current.classList.toggle('open');
   };
 

package/src/components/message-box.tsx

@@ -10,6 +10,24 @@ export type MessageBoxProps = FloatWindowShowProps & {
 };
 
 export class MessageBox {
+  static async showPromise(props: MessageBoxProps): Promise<number> {
+    return new Promise(async (resolve) => {
+      const handleClicked = (index: number, close: FloatWindowCloseProps) => {
+        resolve(index);
+        close();
+      };
+      const closeEvent = () => {
+        resolve(-1);
+        props.closeEvent?.();
+      };
+      await MessageBox.show({
+        ...props,
+        handleClicked,
+        closeEvent,
+      });
+    });
+  }
+
   static async show({
     title,
     children,

package/src/components/popup-menu.tsx

@@ -502,9 +502,9 @@ export const PopupMenuWithButton = (props: PopupMenuWithButtonProps) => {
       onClick={() => {
         hook.openMenu && hook.openMenu();
       }}
-      css={{ '>div': { float: 'right', textAlign: 'left' } }}
+      css={{ display: 'flex', flexDirection: 'row' }}
     >
-      {props.label}:{' '}
+      {props.label ? <div style={{ marginRight: '5px' }}>{`${props.label}:`}</div> : ''}
       <PopupMenu
         list={props.list}
         defaultValue={props.defaultValue}
@@ -535,9 +535,9 @@ export const PopupMenuWithLabel = (props: PopupMenuWithLabelProps) => {
       onClick={() => {
         hook.openMenu && hook.openMenu();
       }}
-      css={{ cursor: 'pointer', '>div': { float: 'right', textAlign: 'left' } }}
+      css={{ display: 'flex', flexDirection: 'row', cursor: 'pointer' }}
     >
-      {props.label}:{' '}
+      {props.label ? <div style={{ marginRight: '5px' }}>{`${props.label}:`}</div> : ''}
       <PopupMenu
         list={props.list}
         defaultValue={props.defaultValue}