lupine.components 1.1.15 → 1.1.16

package/package.json

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

package/src/components/index.ts

@@ -32,6 +32,7 @@ export * from './slide-tab-component';
 export * from './spinner';
 export * from './stars-component';
 export * from './svg';
+export * from './switch-option-component';
 export * from './tabs';
 export * from './text-glow';
 export * from './text-scale';

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

@@ -6,6 +6,7 @@ export type MenuItemProps = {
   alt?: string;
   hide?: boolean;
   devAdmin?: boolean;
+  indent?: number;
 };
 
 export type NestMenuItemProps = MenuItemProps & {

package/src/components/popup-menu.tsx

@@ -1,5 +1,6 @@
 import { CssProps, RefProps, VNode } from 'lupine.web';
 import { stopPropagation } from '../lib';
+import { MenuItemProps } from './menu-item-props';
 
 export type PopupMenuHookProps = {
   openMenu?: (event?: MouseEvent) => void;
@@ -43,9 +44,11 @@ export const PopupMenuWithIcon = (props: PopupMenuProps) => {
 };
 
 export type PopupMenuProps = {
-  list: string[];
+  list: (string | MenuItemProps)[];
   defaultValue: string;
+  icon?: VNode<any>;
   tips?: string;
+  width?: string;
   minWidth?: string;
   maxWidth?: string;
   maxHeight?: string;
@@ -124,7 +127,9 @@ export const PopupMenuWithLabel = (props: PopupMenuWithLabelProps) => {
 export const PopupMenu = ({
   list,
   defaultValue,
+  icon,
   tips = '',
+  width,
   minWidth,
   maxWidth,
   maxHeight,
@@ -172,7 +177,7 @@ export const PopupMenu = ({
         position: 'absolute',
         fontSize: 'var(--menu-font-size)',
         top: 0,
-        width: '100px',
+        width: width || '100px',
         color: 'var(--activatable-color-normal)',
         backgroundColor: 'var(--activatable-bg-color-normal)',
         zIndex: 'var(--layer-menu)',
@@ -198,6 +203,18 @@ export const PopupMenu = ({
           backgroundColor: 'var(--activatable-bg-color-hover)',
           cursor: 'pointer',
         },
+        '.item.indent1': {
+          paddingLeft: '19px',
+        },
+        '.item.indent1:hover': {
+          paddingLeft: '18px',
+        },
+        '.item.indent2': {
+          paddingLeft: '35px',
+        },
+        '.item.indent2:hover': {
+          paddingLeft: '34px',
+        },
       },
       '.popup-menu-list.left-align': {
         left: '2px',
@@ -233,10 +250,12 @@ export const PopupMenu = ({
     hook.openMenu = openMenu;
     hook.getValue = () => selectedValue;
     hook.setLabel = (label: string) => {
-      ref.$('.popup-menu-item .popup-menu-text').innerText = label;
+      if (!icon && noUpdateLabel !== true) {
+        ref.$('.popup-menu-item .popup-menu-text').innerText = label;
+      }
     };
   }
-  const itemClick = (event: any) => {
+  const itemClick = (event: any, item: any) => {
     stopPropagation(event);
 
     // console.log('=======', event);
@@ -244,11 +263,11 @@ export const PopupMenu = ({
     ref.$('.popup-menu-list').classList.remove('open');
     if (event.target) {
       selectedValue = event.target.innerText;
-      if (noUpdateLabel !== true) {
+      if (!icon && noUpdateLabel !== true) {
         ref.$('.popup-menu-item .popup-menu-text').innerText = event.target.innerText;
       }
       if (handleSelected) {
-        handleSelected(event.target.innerText);
+        handleSelected(event.target.innerText, item);
       }
     }
     handleClosed && handleClosed();
@@ -264,19 +283,24 @@ export const PopupMenu = ({
   return (
     <div ref={ref} css={css} onClick={openMenu} title={tips}>
       <div class='popup-menu-item'>
-        <span class={'popup-menu-text' + (noTriangleIcon !== true ? ' triangle-icon' : '')}>
-          {defaultValue || '&nbsp;'}
-        </span>
+        {icon ? (
+          icon
+        ) : (
+          <span class={'popup-menu-text' + (noTriangleIcon !== true ? ' triangle-icon' : '')}>
+            {defaultValue || '&nbsp;'}
+          </span>
+        )}
       </div>
       <div class='popup-menu-bottom'>
         <div class='popup-menu-list'>
           <div>
             {list.map((item) => {
-              return item === '' ? (
-                <hr />
-              ) : (
-                <div class='item' onClick={itemClick}>
-                  {item}
+              if (item === '') return <hr />;
+              const text = typeof item === 'string' ? item : item.text;
+              const indent = typeof item === 'string' ? 0 : item.indent;
+              return (
+                <div class={'item' + (indent ? ' indent' + indent : '')} onClick={(e) => itemClick(e, item)}>
+                  {text}
                 </div>
               );
             })}

package/src/components/svg.tsx

@@ -11,6 +11,14 @@ export const Svg = ({
   height?: string;
   color?: string;
 }) => {
+  let content = children || '';
+  if (content.startsWith('data:image/svg+xml,')) {
+    content = decodeURIComponent(content.slice('data:image/svg+xml,'.length));
+  } else if (content.includes('%') && content.includes('<svg')) {
+    // Handle cases where it's encoded but prefix is missing
+    content = decodeURIComponent(content);
+  }
+
   const css: any = {
     svg: {
       maxWidth: '100%',
@@ -20,5 +28,5 @@ export const Svg = ({
       fill: color,
     },
   };
-  return <div css={css}>{children}</div>;
+  return <div css={css} dangerouslySetInnerHTML={content}></div>;
 };

package/src/components/switch-option-component.tsx

@@ -0,0 +1,74 @@
+import { bindGlobalStyle, CssProps, RefProps } from 'lupine.components';
+
+export type SwitchOptionHookComponentProps = {
+    setValue?: (value: string) => void;
+    getValue?: () => string;
+};
+export type SwitchOptionComponentProps = {
+    option1: string;
+    option2: string;
+    defaultOption: string;
+    onChange?: (value: string) => void;
+    hook?: SwitchOptionHookComponentProps;
+    fontSize?: string;
+};
+export const SwitchOptionComponent = (props: SwitchOptionComponentProps) => {
+    const css: CssProps = {
+        display: 'flex',
+        flexDirection: 'row',
+        borderRadius: '9999px',
+        padding: '2px 4px',
+        fontSize: '0.7rem',
+        backgroundColor: '#e7e7e7',
+        width: 'fit-content',
+        '.switch-btn': {
+            padding: '4px',
+            borderRadius: '50%',
+            border: 'none',
+            background: 'transparent',
+            color: 'inherit',
+            cursor: 'pointer',
+            transition: 'all 0.2s',
+        },
+        '.switch-btn:first-child': {
+            marginRight: '4px',
+        },
+        '.switch-btn.active': {
+            backgroundColor: '#fff',
+            color: '#000000',
+            boxShadow: '2px 1px 2px 1px rgb(189 189 189)',
+        },
+    };
+    bindGlobalStyle('switch-option-box', css);
+
+    const onNotationChange = (value: string) => {
+        props.defaultOption = value;
+        const btns = ref.$all('.switch-btn') as NodeListOf<Element>;
+        btns[0].classList.toggle('active', value === props.option1);
+        btns[1].classList.toggle('active', value === props.option2);
+        props.onChange?.(value);
+    };
+    if (props.hook) {
+        props.hook.setValue = (value: string) => {
+            onNotationChange(value);
+        };
+        props.hook.getValue = () => props.defaultOption;
+    }
+    const ref: RefProps = {};
+    return (
+        <div style={{ fontSize: props.fontSize }} ref={ref} class='switch-option-box'>
+            <button
+                onClick={() => onNotationChange(props.option1)}
+                className={`switch-btn ${props.defaultOption === props.option1 ? 'active' : ''}`}
+            >
+                {props.option1}
+            </button>
+            <button
+                onClick={() => onNotationChange(props.option2)}
+                className={`switch-btn ${props.defaultOption === props.option2 ? 'active' : ''}`}
+            >
+                {props.option2}
+            </button>
+        </div>
+    );
+};

package/src/components/theme-selector.tsx

@@ -1,11 +1,13 @@
-import { CssProps, getCurrentTheme, updateTheme } from 'lupine.web';
+import { CssProps, getCurrentTheme, updateTheme, VNode } from 'lupine.web';
 import { PopupMenu } from './popup-menu';
 
 export type ThemeSelectorProps = {
   className?: string;
+  icon?: VNode<any>;
+  noUpdateLabel?: boolean;
 };
 
-export const ThemeSelector = ({ className }: ThemeSelectorProps) => {
+export const ThemeSelector = ({ className, icon, noUpdateLabel }: ThemeSelectorProps) => {
   const css: CssProps = {
     display: 'flex',
     flexDirection: 'column',
@@ -22,7 +24,13 @@ export const ThemeSelector = ({ className }: ThemeSelectorProps) => {
   }
   return (
     <div css={css} class={['theme-switch', className].join(' ')} title='Select theme'>
-      <PopupMenu list={list} defaultValue={currentTheme.themeName} handleSelected={handleSelected}></PopupMenu>
+      <PopupMenu
+        list={list}
+        defaultValue={currentTheme.themeName}
+        handleSelected={handleSelected}
+        icon={icon}
+        noUpdateLabel={noUpdateLabel}
+      ></PopupMenu>
     </div>
   );
 };

package/src/frames/responsive-frame.tsx

@@ -14,7 +14,7 @@ export interface ResponsiveFrameProps {
   placeholderClassname: string;
   mainContent: VNode<any>;
   desktopHeaderTitle: string;
-  desktopFooterTitle: string;
+  desktopFooterTitle?: string;
   desktopTopMenu: IconMenuItemProps[];
   mobileBottomMenu: IconMenuItemProps[];
   mobileSideMenuContent: VNode<any>;
@@ -74,7 +74,7 @@ export const ResponsiveFrame = async (props: ResponsiveFrameProps) => {
         <MobileSideMenu>{props.mobileSideMenuContent}</MobileSideMenu>
         <div class={'content-block ' + props.placeholderClassname}>{props.mainContent}</div>
         <div class='frame-footer'>
-          <DesktopFooter title={props.desktopFooterTitle}></DesktopFooter>
+          {props.desktopFooterTitle && <DesktopFooter title={props.desktopFooterTitle}></DesktopFooter>}
           <MobileFooterMenu items={props.mobileBottomMenu}></MobileFooterMenu>
         </div>
       </div>