lupine.components 1.1.11 → 1.1.14

package/src/components/message-box.tsx

@@ -1,44 +1,44 @@
-import { FloatWindow, FloatWindowCloseProps, FloatWindowShowProps } from './float-window';
-
-export enum MessageBoxButtonProps {
-  YesNo = 'yesno',
-  OkCancel = 'okcancel',
-  Ok = 'ok',
-}
-export type MessageBoxProps = FloatWindowShowProps & {
-  buttonType: MessageBoxButtonProps;
-};
-
-export class MessageBox {
-  static async show({
-    title,
-    children,
-    contentMaxHeight,
-    contentMinWidth,
-    buttonType = MessageBoxButtonProps.OkCancel,
-    noMoving = false,
-    noModal = false,
-    closeEvent,
-    handleClicked,
-    closeWhenClickOutside = false,
-  }: MessageBoxProps): Promise<FloatWindowCloseProps> {
-    const buttons =
-      buttonType === MessageBoxButtonProps.OkCancel
-        ? ['OK', 'Cancel']
-        : buttonType === MessageBoxButtonProps.YesNo
-        ? ['Yes', 'No']
-        : ['OK'];
-    return FloatWindow.show({
-      title,
-      children,
-      contentMaxHeight,
-      contentMinWidth,
-      buttons,
-      noMoving,
-      noModal,
-      closeEvent,
-      handleClicked,
-      closeWhenClickOutside,
-    });
-  }
-}
+import { FloatWindow, FloatWindowCloseProps, FloatWindowShowProps } from './float-window';
+
+export enum MessageBoxButtonProps {
+  YesNo = 'yesno',
+  OkCancel = 'okcancel',
+  Ok = 'ok',
+}
+export type MessageBoxProps = FloatWindowShowProps & {
+  buttonType: MessageBoxButtonProps;
+};
+
+export class MessageBox {
+  static async show({
+    title,
+    children,
+    contentMaxHeight,
+    contentMinWidth,
+    buttonType = MessageBoxButtonProps.OkCancel,
+    noMoving = false,
+    noModal = false,
+    closeEvent,
+    handleClicked,
+    closeWhenClickOutside = false,
+  }: MessageBoxProps): Promise<FloatWindowCloseProps> {
+    const buttons =
+      buttonType === MessageBoxButtonProps.OkCancel
+        ? ['OK', 'Cancel']
+        : buttonType === MessageBoxButtonProps.YesNo
+        ? ['Yes', 'No']
+        : ['OK'];
+    return FloatWindow.show({
+      title,
+      children,
+      contentMaxHeight,
+      contentMinWidth,
+      buttons,
+      noMoving,
+      noModal,
+      closeEvent,
+      handleClicked,
+      closeWhenClickOutside,
+    });
+  }
+}

package/src/components/meta-data.tsx

@@ -1,36 +1,36 @@
-// import { bindPageResetEvent } from '../core/page-reset-events';
-import { addMetaDataTags } from 'lupine.web';
-type NameMeta = { name: string; content: string };
-type PropertyMeta = { property: string; content: string };
-type HttpEquivMeta = { httpEquiv: string; content: string };
-type AllMeta = NameMeta | PropertyMeta | HttpEquivMeta;
-
-function isNameMeta(data: any): data is NameMeta {
-  return !!(data.name && data.content);
-}
-function isPropertyMeta(data: any): data is PropertyMeta {
-  return !!(data.property && data.content);
-}
-function isHttpEquivMeta(data: any): data is HttpEquivMeta {
-  return !!(data.httpEquiv && data.content);
-}
-
-// should use description tag instead of meta tag ( <meta name="description" content="..."> )
-export const MetaData = (data: AllMeta) => {
-  if (isNameMeta(data)) {
-    addMetaDataTags(`name:${data.name}`, `<meta name="${data.name}" content="${data.content}">`);
-  } else if (isPropertyMeta(data)) {
-    addMetaDataTags(`property:${data.property}`, `<meta property="${data.property}" content="${data.content}">`);
-  } else if (isHttpEquivMeta(data)) {
-    addMetaDataTags(`http-equiv:${data.httpEquiv}`, `<meta http-equiv="${data.httpEquiv}" content="${data.content}">`);
-  } else if ((data as any).key && (data as any).string) {
-    addMetaDataTags(`${(data as any).key}`, `${(data as any).string}`);
-  } else {
-    console.warn('Unknown meta data:', data);
-  }
-  return <></>;
-};
-
-// bindPageResetEvent(() => {
-//   _metaData = {};
-// });
+// import { bindPageResetEvent } from '../core/page-reset-events';
+import { addMetaDataTags } from 'lupine.web';
+type NameMeta = { name: string; content: string };
+type PropertyMeta = { property: string; content: string };
+type HttpEquivMeta = { httpEquiv: string; content: string };
+type AllMeta = NameMeta | PropertyMeta | HttpEquivMeta;
+
+function isNameMeta(data: any): data is NameMeta {
+  return !!(data.name && data.content);
+}
+function isPropertyMeta(data: any): data is PropertyMeta {
+  return !!(data.property && data.content);
+}
+function isHttpEquivMeta(data: any): data is HttpEquivMeta {
+  return !!(data.httpEquiv && data.content);
+}
+
+// should use description tag instead of meta tag ( <meta name="description" content="..."> )
+export const MetaData = (data: AllMeta) => {
+  if (isNameMeta(data)) {
+    addMetaDataTags(`name:${data.name}`, `<meta name="${data.name}" content="${data.content}">`);
+  } else if (isPropertyMeta(data)) {
+    addMetaDataTags(`property:${data.property}`, `<meta property="${data.property}" content="${data.content}">`);
+  } else if (isHttpEquivMeta(data)) {
+    addMetaDataTags(`http-equiv:${data.httpEquiv}`, `<meta http-equiv="${data.httpEquiv}" content="${data.content}">`);
+  } else if ((data as any).key && (data as any).string) {
+    addMetaDataTags(`${(data as any).key}`, `${(data as any).string}`);
+  } else {
+    console.warn('Unknown meta data:', data);
+  }
+  return <></>;
+};
+
+// bindPageResetEvent(() => {
+//   _metaData = {};
+// });

package/src/components/meta-description.tsx

@@ -1,12 +1,12 @@
-// import { bindPageResetEvent } from '../core/page-reset-events';
-
-import { addMetaDataTags } from "lupine.web";
-
-export const MetaDescription = ({ children }: { children: string }) => {
-  addMetaDataTags('name:description', `<meta name="description" content="${children}">`);
-  return <></>;
-};
-
-// bindPageResetEvent(() => {
-//   _description.value = '';
-// });
+// import { bindPageResetEvent } from '../core/page-reset-events';
+
+import { addMetaDataTags } from 'lupine.web';
+
+export const MetaDescription = ({ children }: { children: string }) => {
+  addMetaDataTags('name:description', `<meta name="description" content="${children}">`);
+  return <></>;
+};
+
+// bindPageResetEvent(() => {
+//   _description.value = '';
+// });

package/src/components/mobile-components/icon-menu-item-props.ts

@@ -1,6 +1,6 @@
-export interface IconMenuItemProps {
-  icon: string;
-  href: string;
-  text: string;
-  topout?: boolean; // Topout for mobile bottom icon menu
-}
+export interface IconMenuItemProps {
+  icon: string;
+  href: string;
+  text: string;
+  topout?: boolean; // Topout for mobile bottom icon menu
+}

package/src/components/mobile-components/index.ts

@@ -1,9 +1,8 @@
-export * from './icon-menu-item-props';
-export * from './mobile-footer-menu';
-export * from './mobile-header-with-back';
-export * from './mobile-header-component';
-export * from './mobile-header-title-icon';
-export * from './mobile-side-menu';
-export * from './mobile-top-sys-icon';
-export * from './mobile-top-sys-menu';
-
+export * from './icon-menu-item-props';
+export * from './mobile-footer-menu';
+export * from './mobile-header-with-back';
+export * from './mobile-header-component';
+export * from './mobile-header-title-icon';
+export * from './mobile-side-menu';
+export * from './mobile-top-sys-icon';
+export * from './mobile-top-sys-menu';

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

@@ -1,95 +1,95 @@
-import { CssProps, MediaQueryRange } from 'lupine.components';
-import { IconMenuItemProps } from './icon-menu-item-props';
-
-export interface MobileFooterMenuProps {
-  items: IconMenuItemProps[];
-  color?: string;
-  activeColor?: string;
-  topoutColor?: string;
-  topoutBackgroundColor?: string;
-}
-export const MobileFooterMenu = (props: MobileFooterMenuProps) => {
-  const css: CssProps = {
-    '.footer-menu': {
-      display: 'none',
-      // position: 'fixed',
-      // left: 0,
-      // right: 0,
-      // bottom: 0,
-      width: '100%',
-      background: 'var(--sidebar-bg-color)',
-      paddingBottom: 'env(safe-area-inset-bottom)',
-      minHeight: '50px',
-      justifyContent: 'space-around',
-      alignItems: 'center',
-      borderTop: 'var(--primary-border)',
-    },
-    '.footer-menu, .footer-menu a': {
-      textDecoration: 'none',
-      color: props.color || 'var(--primary-color)',
-    },
-    '.footer-menu .footer-menu-item': {
-      padding: '4px 16px 4px 16px',
-      fontSize: '11px',
-      height: '55px', // 和主页保留的底部菜单高度一致
-      width: '55px',
-      display: 'flex',
-      flexWrap: 'wrap',
-      alignItems: 'center',
-    },
-    '.footer-menu .footer-menu-item i': {
-      display: 'block',
-      fontSize: '22px',
-      marginBottom: '4px',
-    },
-    '.footer-menu .footer-menu-item.footer-menu-topout': {
-      marginTop: '-43px',
-      borderRadius: '50%',
-      backgroundColor: props.topoutBackgroundColor || '#f33939',
-      color: props.topoutColor || 'var(--primary-color)',
-    },
-    '.footer-menu .footer-menu-item-a': {
-      zIndex: 'var(--layer-header-footer)',
-    },
-    '.footer-menu .footer-menu-item.active': {
-      color: props.activeColor || 'var(--primary-accent-color)',
-    },
-    [MediaQueryRange.TabletBelow]: {
-      '.footer-menu': {
-        display: 'flex',
-      },
-    },
-  };
-  const onClick = (index: number, href: string) => {
-    const items = document.querySelector('.footer-menu-item.active');
-    items?.classList.remove('active');
-    // find footer-menu-item by index
-    const item = document.querySelector(`a:nth-child(${index + 1}) .footer-menu-item`);
-    item?.classList.add('active');
-  };
-  let curretnUrl = typeof window !== 'undefined' ? window.location.pathname : '';
-  return (
-    <div css={css} class='footer-menu-box'>
-      <div class='footer-menu'>
-        {props.items.map((item, index) => (
-          <a class='footer-menu-item-a' href={item.href} key={index}>
-            <div
-              class={`footer-menu-item ${item.topout ? 'footer-menu-topout' : ''} ${
-                curretnUrl === item.href ? 'active' : ''
-              }`}
-              onClick={() => onClick(index, item.href)}
-            >
-              <i class={`ifc-icon ${item.icon}`}></i>
-              {item.text}
-            </div>
-          </a>
-        ))}
-        {/* <div class='footer-menu-item'><a href='/'><i class="ifc-icon ma-home-outline"></i>主页</a></div>
-        <div class='footer-menu-item'><a href='/user/tools'><i class="ifc-icon bo-multimedia-music-note"></i>工具</a></div>
-        <div class='footer-menu-item footer-menu-topout'><a href='/user/customer'><i class="ifc-icon co-cil-chat-bubble"></i>客服</a></div>
-        <div class='footer-menu-item'><a href='/user/member'><i class="ifc-icon ma-crown-outline"></i>会员</a></div>
-        <div class='footer-menu-item'><a href='/user/mine'><i class="ifc-icon ma-account-cog-outline"></i>我的</a></div> */}
-      </div>
-    </div>
-  );
-};
+import { CssProps, MediaQueryRange } from 'lupine.components';
+import { IconMenuItemProps } from './icon-menu-item-props';
+
+export interface MobileFooterMenuProps {
+  items: IconMenuItemProps[];
+  color?: string;
+  activeColor?: string;
+  topoutColor?: string;
+  topoutBackgroundColor?: string;
+}
+export const MobileFooterMenu = (props: MobileFooterMenuProps) => {
+  const css: CssProps = {
+    '.footer-menu': {
+      display: 'none',
+      // position: 'fixed',
+      // left: 0,
+      // right: 0,
+      // bottom: 0,
+      width: '100%',
+      background: 'var(--sidebar-bg-color)',
+      paddingBottom: 'env(safe-area-inset-bottom)',
+      minHeight: '50px',
+      justifyContent: 'space-around',
+      alignItems: 'center',
+      borderTop: 'var(--primary-border)',
+    },
+    '.footer-menu, .footer-menu a': {
+      textDecoration: 'none',
+      color: props.color || 'var(--primary-color)',
+    },
+    '.footer-menu .footer-menu-item': {
+      padding: '4px 16px 4px 16px',
+      fontSize: '11px',
+      height: '55px', // 和主页保留的底部菜单高度一致
+      width: '55px',
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+    },
+    '.footer-menu .footer-menu-item i': {
+      display: 'block',
+      fontSize: '22px',
+      marginBottom: '4px',
+    },
+    '.footer-menu .footer-menu-item.footer-menu-topout': {
+      marginTop: '-43px',
+      borderRadius: '50%',
+      backgroundColor: props.topoutBackgroundColor || '#f33939',
+      color: props.topoutColor || 'var(--primary-color)',
+    },
+    '.footer-menu .footer-menu-item-a': {
+      zIndex: 'var(--layer-header-footer)',
+    },
+    '.footer-menu .footer-menu-item.active': {
+      color: props.activeColor || 'var(--primary-accent-color)',
+    },
+    [MediaQueryRange.TabletBelow]: {
+      '.footer-menu': {
+        display: 'flex',
+      },
+    },
+  };
+  const onClick = (index: number, href: string) => {
+    const items = document.querySelector('.footer-menu-item.active');
+    items?.classList.remove('active');
+    // find footer-menu-item by index
+    const item = document.querySelector(`a:nth-child(${index + 1}) .footer-menu-item`);
+    item?.classList.add('active');
+  };
+  let curretnUrl = typeof window !== 'undefined' ? window.location.pathname : '';
+  return (
+    <div css={css} class='footer-menu-box'>
+      <div class='footer-menu'>
+        {props.items.map((item, index) => (
+          <a class='footer-menu-item-a' href={item.href} key={index}>
+            <div
+              class={`footer-menu-item ${item.topout ? 'footer-menu-topout' : ''} ${
+                curretnUrl === item.href ? 'active' : ''
+              }`}
+              onClick={() => onClick(index, item.href)}
+            >
+              <i class={`ifc-icon ${item.icon}`}></i>
+              {item.text}
+            </div>
+          </a>
+        ))}
+        {/* <div class='footer-menu-item'><a href='/'><i class="ifc-icon ma-home-outline"></i>主页</a></div>
+        <div class='footer-menu-item'><a href='/user/tools'><i class="ifc-icon bo-multimedia-music-note"></i>工具</a></div>
+        <div class='footer-menu-item footer-menu-topout'><a href='/user/customer'><i class="ifc-icon co-cil-chat-bubble"></i>客服</a></div>
+        <div class='footer-menu-item'><a href='/user/member'><i class="ifc-icon ma-crown-outline"></i>会员</a></div>
+        <div class='footer-menu-item'><a href='/user/mine'><i class="ifc-icon ma-account-cog-outline"></i>我的</a></div> */}
+      </div>
+    </div>
+  );
+};

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

@@ -1,101 +1,101 @@
-/*
-MobileHeaderComponent is the topest header for mobile, and Left, Center and Right part can be updated by other components
-
-If Left and Right are not set, then Center (100% width) can be used by temporiry headers like MobileHeaderTitleIcon,
-to set Left and Right icons inside Center part.
-
-For example, the header can be updated like this with different Left and Right icons:
-<MobileHeaderCenter>
-  <MobileHeaderTitleIcon title='工具' left={<MobileHeaderEmptyIcon />} right={<MobileTopSysIcon />} />
-</MobileHeaderCenter>
-You can update Left, Right and Center separately, but it's convenient to use MobileHeaderCenter to set both Left and Right icons..
-*/
-import { CssProps, HtmlVar, VNode } from 'lupine.components';
-
-export class MobileHeaderHelper {
-  private static instance: MobileHeaderHelper;
-
-  private leftContent = new HtmlVar('');
-  private centerContent = new HtmlVar('');
-  private rightContent = new HtmlVar('');
-  private constructor() {}
-
-  public static getInstance(): MobileHeaderHelper {
-    if (!MobileHeaderHelper.instance) {
-      MobileHeaderHelper.instance = new MobileHeaderHelper();
-    }
-    return MobileHeaderHelper.instance;
-  }
-
-  public setLeftContent(content: string | VNode<any>) {
-    this.leftContent.value = content;
-  }
-  public getLeftContent() {
-    return this.leftContent;
-  }
-  public setCenterContent(content: string | VNode<any>) {
-    this.centerContent.value = content;
-  }
-  public getCenterContent() {
-    return this.centerContent;
-  }
-  public setRightContent(content: string | VNode<any>) {
-    this.rightContent.value = content;
-  }
-  public getRightContent() {
-    return this.rightContent;
-  }
-
-  public hideHeader() {
-    this.leftContent.value = '';
-    this.centerContent.value = '';
-    this.rightContent.value = '';
-  }
-}
-export const mobileHeaderHelper = MobileHeaderHelper.getInstance();
-
-export const MobileHeaderLeft = (props: { children: VNode<any> }) => {
-  mobileHeaderHelper.setLeftContent(props.children);
-  return <></>;
-};
-
-export const MobileHeaderCenter = (props: { children: VNode<any> }) => {
-  mobileHeaderHelper.setCenterContent(props.children);
-  return <></>;
-};
-
-export const MobileHeaderRight = (props: { children: VNode<any> }) => {
-  mobileHeaderHelper.setRightContent(props.children);
-  return <></>;
-};
-
-export const MobileHeaderHide = () => {
-  mobileHeaderHelper.hideHeader();
-  return <></>;
-};
-
-// there should be only one MobileHeaderComponent on a page
-export const MobileHeaderComponent = (props: any) => {
-  const css: CssProps = {
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%',
-    height: 'auto',
-    // padding: '2px 0',
-    // boxShadow: 'var(--mobile-header-shadow)', // 第二项 2px 的话，顶部有阴影（线）
-    '& > *': {
-      height: '100%',
-    },
-    '.mobile-header-center': {
-      flex: 1,
-    },
-  };
-
-  return (
-    <div css={css} class='mobile-header-component'>
-      <div class='mobile-header-left'>{mobileHeaderHelper.getLeftContent().node}</div>
-      <div class='mobile-header-center'>{mobileHeaderHelper.getCenterContent().node}</div>
-      <div class='mobile-header-right'>{mobileHeaderHelper.getRightContent().node}</div>
-    </div>
-  );
-};
+/*
+MobileHeaderComponent is the topest header for mobile, and Left, Center and Right part can be updated by other components
+
+If Left and Right are not set, then Center (100% width) can be used by temporiry headers like MobileHeaderTitleIcon,
+to set Left and Right icons inside Center part.
+
+For example, the header can be updated like this with different Left and Right icons:
+<MobileHeaderCenter>
+  <MobileHeaderTitleIcon title='工具' left={<MobileHeaderEmptyIcon />} right={<MobileTopSysIcon />} />
+</MobileHeaderCenter>
+You can update Left, Right and Center separately, but it's convenient to use MobileHeaderCenter to set both Left and Right icons..
+*/
+import { CssProps, HtmlVar, VNode } from 'lupine.components';
+
+export class MobileHeaderHelper {
+  private static instance: MobileHeaderHelper;
+
+  private leftContent = new HtmlVar('');
+  private centerContent = new HtmlVar('');
+  private rightContent = new HtmlVar('');
+  private constructor() {}
+
+  public static getInstance(): MobileHeaderHelper {
+    if (!MobileHeaderHelper.instance) {
+      MobileHeaderHelper.instance = new MobileHeaderHelper();
+    }
+    return MobileHeaderHelper.instance;
+  }
+
+  public setLeftContent(content: string | VNode<any>) {
+    this.leftContent.value = content;
+  }
+  public getLeftContent() {
+    return this.leftContent;
+  }
+  public setCenterContent(content: string | VNode<any>) {
+    this.centerContent.value = content;
+  }
+  public getCenterContent() {
+    return this.centerContent;
+  }
+  public setRightContent(content: string | VNode<any>) {
+    this.rightContent.value = content;
+  }
+  public getRightContent() {
+    return this.rightContent;
+  }
+
+  public hideHeader() {
+    this.leftContent.value = '';
+    this.centerContent.value = '';
+    this.rightContent.value = '';
+  }
+}
+export const mobileHeaderHelper = MobileHeaderHelper.getInstance();
+
+export const MobileHeaderLeft = (props: { children: VNode<any> }) => {
+  mobileHeaderHelper.setLeftContent(props.children);
+  return <></>;
+};
+
+export const MobileHeaderCenter = (props: { children: VNode<any> }) => {
+  mobileHeaderHelper.setCenterContent(props.children);
+  return <></>;
+};
+
+export const MobileHeaderRight = (props: { children: VNode<any> }) => {
+  mobileHeaderHelper.setRightContent(props.children);
+  return <></>;
+};
+
+export const MobileHeaderHide = () => {
+  mobileHeaderHelper.hideHeader();
+  return <></>;
+};
+
+// there should be only one MobileHeaderComponent on a page
+export const MobileHeaderComponent = (props: any) => {
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    height: 'auto',
+    // padding: '2px 0',
+    // boxShadow: 'var(--mobile-header-shadow)', // 第二项 2px 的话，顶部有阴影（线）
+    '& > *': {
+      height: '100%',
+    },
+    '.mobile-header-center': {
+      flex: 1,
+    },
+  };
+
+  return (
+    <div css={css} class='mobile-header-component'>
+      <div class='mobile-header-left'>{mobileHeaderHelper.getLeftContent().node}</div>
+      <div class='mobile-header-center'>{mobileHeaderHelper.getCenterContent().node}</div>
+      <div class='mobile-header-right'>{mobileHeaderHelper.getRightContent().node}</div>
+    </div>
+  );
+};