lupine.components 1.1.13 → 1.1.15

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

@@ -1,154 +1,154 @@
-import { backActionHelper, CssProps, RefProps, VNode } from 'lupine.components';
-
-export class MobileSideMenuHelper {
-  static show() {
-    const ref = document.querySelector('.mobile-side-menu-mask') as HTMLDivElement;
-    ref.classList.add('show');
-    setTimeout(() => {
-      ref.classList.add('animate-show');
-    }, 1);
-
-    const backActionId = backActionHelper.genBackActionId();
-    ref.setAttribute('data-back-action', backActionId);
-  }
-
-  static hide() {
-    const ref = document.querySelector('.mobile-side-menu-mask') as HTMLDivElement;
-    ref.removeAttribute('data-back-action');
-    ref.classList.remove('animate-show');
-    setTimeout(() => {
-      ref.classList.remove('show');
-    }, 300);
-  }
-
-  static isTouchEventAdded = false;
-  static addTouchEvent() {
-    if (this.isTouchEventAdded) {
-      return;
-    }
-
-    this.isTouchEventAdded = true;
-    let touchstartY = 0;
-    let touchstartX = 0;
-    let direction = '';
-    let moveStart = false;
-    let isOpen = false;
-    const maskDom = document.querySelector('.mobile-side-menu-mask') as HTMLDivElement;
-    document.addEventListener('touchstart', (e) => {
-      touchstartY = e.touches[0].clientY;
-      touchstartX = e.touches[0].clientX;
-      direction = '';
-      moveStart = false;
-      isOpen = maskDom?.classList.contains('show');
-      if (isOpen) {
-        if (touchstartX > 80) {
-          moveStart = true;
-        }
-      } else {
-        if (touchstartX < 40) {
-          moveStart = true;
-        }
-      }
-      // if (e.touches[0].clientX < 30 && !maskDom?.classList.contains('show')) {
-      //   // 靠左边缘, 如果菜单已经打开，忽略手势
-      //   touchStartX = e.touches[0].clientX;
-      // } else {
-      //   touchStartX = -1; // 忽略非左侧边缘手势
-      // }
-    });
-
-    document.addEventListener('touchmove', (e) => {
-      if (!moveStart) {
-        return;
-      }
-
-      // console.log('touchmove', e.touches[0].clientX);
-      if (direction === '') {
-        if (e.touches[0].clientX - touchstartX !== 0) {
-          direction = 'X';
-        } else {
-          moveStart = false;
-          return;
-        }
-      }
-
-      if (isOpen) {
-        if (e.touches[0].clientX - touchstartX < 30) {
-          MobileSideMenuHelper.hide();
-          moveStart = false;
-          return;
-        }
-      } else {
-        if (e.touches[0].clientX - touchstartX > 80) {
-          MobileSideMenuHelper.show();
-          moveStart = false;
-          return;
-        }
-      }
-    });
-
-    document.addEventListener('touchend', () => {
-      moveStart = false;
-      direction = '';
-    });
-  }
-}
-export const MobileSideMenu = (props: { children: VNode<any> }) => {
-  const css: CssProps = {
-    '.mobile-side-menu-mask': {
-      display: 'none',
-      flexDirection: 'column',
-      position: 'fixed',
-      top: '0',
-      left: '0',
-      right: '0',
-      bottom: '0',
-      zIndex: 'var(--layer-menu)',
-      backgroundColor: '#000000b0',
-      '&.show': {
-        display: 'flex',
-      },
-      '&.animate-show .mobile-side-menu': {
-        transform: 'scaleX(1)',
-      },
-    },
-    '.mobile-side-menu': {
-      display: 'flex',
-      flexDirection: 'column',
-      padding: '16px',
-      transition: 'transform 0.3s ease-in-out',
-      backgroundColor: 'var(--primary-bg-color)',
-      width: '70%',
-      maxWidth: '300px',
-      height: '100%',
-      overflowX: 'hidden',
-      overflowY: 'auto',
-      transformOrigin: 'left',
-      transform: 'scaleX(0)',
-      // boxShadow: 'var(--block-box-shadow)',
-      boxShadow: 'var(--cover-box-shadow)',
-    },
-  };
-
-  const onClickContainer = (event: Event) => {
-    if (
-      event.target instanceof HTMLDivElement &&
-      (event.target as HTMLDivElement).classList.contains('mobile-side-menu-mask')
-    ) {
-      MobileSideMenuHelper.hide();
-    }
-  };
-  const ref: RefProps = {
-    onLoad: async () => {
-      MobileSideMenuHelper.addTouchEvent();
-    },
-  };
-  return (
-    <div css={css} ref={ref}>
-      {/* <SliderFrame hook={props.sliderFrameHook} /> */}
-      <div class='mobile-side-menu-mask' onClick={onClickContainer}>
-        <div class='mobile-side-menu'>{props.children}</div>
-      </div>
-    </div>
-  );
-};
+import { backActionHelper, CssProps, RefProps, VNode } from 'lupine.components';
+
+export class MobileSideMenuHelper {
+  static show() {
+    const ref = document.querySelector('.mobile-side-menu-mask') as HTMLDivElement;
+    ref.classList.add('show');
+    setTimeout(() => {
+      ref.classList.add('animate-show');
+    }, 1);
+
+    const backActionId = backActionHelper.genBackActionId();
+    ref.setAttribute('data-back-action', backActionId);
+  }
+
+  static hide() {
+    const ref = document.querySelector('.mobile-side-menu-mask') as HTMLDivElement;
+    ref.removeAttribute('data-back-action');
+    ref.classList.remove('animate-show');
+    setTimeout(() => {
+      ref.classList.remove('show');
+    }, 300);
+  }
+
+  static isTouchEventAdded = false;
+  static addTouchEvent() {
+    if (this.isTouchEventAdded) {
+      return;
+    }
+
+    this.isTouchEventAdded = true;
+    let touchstartY = 0;
+    let touchstartX = 0;
+    let direction = '';
+    let moveStart = false;
+    let isOpen = false;
+    const maskDom = document.querySelector('.mobile-side-menu-mask') as HTMLDivElement;
+    document.addEventListener('touchstart', (e) => {
+      touchstartY = e.touches[0].clientY;
+      touchstartX = e.touches[0].clientX;
+      direction = '';
+      moveStart = false;
+      isOpen = maskDom?.classList.contains('show');
+      if (isOpen) {
+        if (touchstartX > 80) {
+          moveStart = true;
+        }
+      } else {
+        if (touchstartX < 40) {
+          moveStart = true;
+        }
+      }
+      // if (e.touches[0].clientX < 30 && !maskDom?.classList.contains('show')) {
+      //   // 靠左边缘, 如果菜单已经打开，忽略手势
+      //   touchStartX = e.touches[0].clientX;
+      // } else {
+      //   touchStartX = -1; // 忽略非左侧边缘手势
+      // }
+    });
+
+    document.addEventListener('touchmove', (e) => {
+      if (!moveStart) {
+        return;
+      }
+
+      // console.log('touchmove', e.touches[0].clientX);
+      if (direction === '') {
+        if (e.touches[0].clientX - touchstartX !== 0) {
+          direction = 'X';
+        } else {
+          moveStart = false;
+          return;
+        }
+      }
+
+      if (isOpen) {
+        if (e.touches[0].clientX - touchstartX < 30) {
+          MobileSideMenuHelper.hide();
+          moveStart = false;
+          return;
+        }
+      } else {
+        if (e.touches[0].clientX - touchstartX > 80) {
+          MobileSideMenuHelper.show();
+          moveStart = false;
+          return;
+        }
+      }
+    });
+
+    document.addEventListener('touchend', () => {
+      moveStart = false;
+      direction = '';
+    });
+  }
+}
+export const MobileSideMenu = (props: { children: VNode<any> }) => {
+  const css: CssProps = {
+    '.mobile-side-menu-mask': {
+      display: 'none',
+      flexDirection: 'column',
+      position: 'fixed',
+      top: '0',
+      left: '0',
+      right: '0',
+      bottom: '0',
+      zIndex: 'var(--layer-menu)',
+      backgroundColor: '#000000b0',
+      '&.show': {
+        display: 'flex',
+      },
+      '&.animate-show .mobile-side-menu': {
+        transform: 'scaleX(1)',
+      },
+    },
+    '.mobile-side-menu': {
+      display: 'flex',
+      flexDirection: 'column',
+      padding: '16px',
+      transition: 'transform 0.3s ease-in-out',
+      backgroundColor: 'var(--primary-bg-color)',
+      width: '70%',
+      maxWidth: '300px',
+      height: '100%',
+      overflowX: 'hidden',
+      overflowY: 'auto',
+      transformOrigin: 'left',
+      transform: 'scaleX(0)',
+      // boxShadow: 'var(--block-box-shadow)',
+      boxShadow: 'var(--cover-box-shadow)',
+    },
+  };
+
+  const onClickContainer = (event: Event) => {
+    if (
+      event.target instanceof HTMLDivElement &&
+      (event.target as HTMLDivElement).classList.contains('mobile-side-menu-mask')
+    ) {
+      MobileSideMenuHelper.hide();
+    }
+  };
+  const ref: RefProps = {
+    onLoad: async () => {
+      MobileSideMenuHelper.addTouchEvent();
+    },
+  };
+  return (
+    <div css={css} ref={ref}>
+      {/* <SliderFrame hook={props.sliderFrameHook} /> */}
+      <div class='mobile-side-menu-mask' onClick={onClickContainer}>
+        <div class='mobile-side-menu'>{props.children}</div>
+      </div>
+    </div>
+  );
+};

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

@@ -1,18 +1,18 @@
-// import { NotificationColor, NotificationMessage, updateTheme, PopupMenuWithIcon, CssProps } from 'lupine.components';
-import { CssProps } from 'lupine.components';
-import { MobileSideMenuHelper } from './mobile-side-menu';
-
-export const MobileTopSysIcon = () => {
-  const css: CssProps = {
-    cursor: 'pointer',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    fontSize: '28px',
-  };
-  return (
-    <div css={css} onClick={() => MobileSideMenuHelper.show()}>
-      <i class='ifc-icon bs-list'></i>
-    </div>
-  );
-};
+// import { NotificationColor, NotificationMessage, updateTheme, PopupMenuWithIcon, CssProps } from 'lupine.components';
+import { CssProps } from 'lupine.components';
+import { MobileSideMenuHelper } from './mobile-side-menu';
+
+export const MobileTopSysIcon = () => {
+  const css: CssProps = {
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    fontSize: '28px',
+  };
+  return (
+    <div css={css} onClick={() => MobileSideMenuHelper.show()}>
+      <i class='ifc-icon bs-list'></i>
+    </div>
+  );
+};

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

@@ -1,62 +1,62 @@
-/*
-  const onLogout = async () => {
-    logout('/');
-  };
-  const userCookie = getCookieUser();
-  const listMenu = [
-    userCookie && (userCookie.email || userCookie.phone || userCookie.wx) ? '退出登录' : '登录',
-    '',
-    '浅色模式',
-    '深色模式',
-    '系统模式',
-    '',
-    '帮助',
-    '关于',
-  ];
-  if (userCookie && userCookie.admin === '1') {
-    listMenu.splice(0, 0, '管理员');
-  }
-
-  const handleSelected = (value: string) => {
-    if (value === '浅色模式') {
-      updateTheme('light');
-    } else if (value === '深色模式') {
-      updateTheme('dark');
-    } else if (value === '系统模式') {
-      const themeMedia = window.matchMedia('(prefers-color-scheme: light)');
-      if (themeMedia.matches) {
-        document.documentElement.classList.remove('dark');
-        document.documentElement.classList.add('light');
-      } else {
-        document.documentElement.classList.remove('light');
-        document.documentElement.classList.add('dark');
-      }
-    } else if (value === '退出登录') {
-      onLogout();
-    } else if (value === '登录') {
-      window.location.href = '/login';
-    } else if (value === '管理员') {
-      window.open('/admin');
-    } else {
-      NotificationMessage.sendMessage('Selected: ' + value, NotificationColor.Success);
-    }
-  }
-*/
-import { PopupMenuWithIcon } from 'lupine.components';
-
-export const MobileTopSysMenu = (props: { menuItems: string[]; handleSelected: (value: string) => void }) => {
-  return (
-    <PopupMenuWithIcon
-      list={props.menuItems}
-      defaultValue=''
-      tips=''
-      minWidth='auto'
-      maxWidth='200px'
-      maxHeight='300px'
-      align='right'
-      noTriangleIcon={true}
-      handleSelected={props.handleSelected}
-      noUpdateLabel={true}
-    ></PopupMenuWithIcon>
-  );
-};
+/*
+  const onLogout = async () => {
+    logout('/');
+  };
+  const userCookie = getCookieUser();
+  const listMenu = [
+    userCookie && (userCookie.email || userCookie.phone || userCookie.wx) ? '退出登录' : '登录',
+    '',
+    '浅色模式',
+    '深色模式',
+    '系统模式',
+    '',
+    '帮助',
+    '关于',
+  ];
+  if (userCookie && userCookie.admin === '1') {
+    listMenu.splice(0, 0, '管理员');
+  }
+
+  const handleSelected = (value: string) => {
+    if (value === '浅色模式') {
+      updateTheme('light');
+    } else if (value === '深色模式') {
+      updateTheme('dark');
+    } else if (value === '系统模式') {
+      const themeMedia = window.matchMedia('(prefers-color-scheme: light)');
+      if (themeMedia.matches) {
+        document.documentElement.classList.remove('dark');
+        document.documentElement.classList.add('light');
+      } else {
+        document.documentElement.classList.remove('light');
+        document.documentElement.classList.add('dark');
+      }
+    } else if (value === '退出登录') {
+      onLogout();
+    } else if (value === '登录') {
+      window.location.href = '/login';
+    } else if (value === '管理员') {
+      window.open('/admin');
+    } else {
+      NotificationMessage.sendMessage('Selected: ' + value, NotificationColor.Success);
+    }
+  }
+*/
+import { PopupMenuWithIcon } from 'lupine.components';
+
+export const MobileTopSysMenu = (props: { menuItems: string[]; handleSelected: (value: string) => void }) => {
+  return (
+    <PopupMenuWithIcon
+      list={props.menuItems}
+      defaultValue=''
+      tips=''
+      minWidth='auto'
+      maxWidth='200px'
+      maxHeight='300px'
+      align='right'
+      noTriangleIcon={true}
+      handleSelected={props.handleSelected}
+      noUpdateLabel={true}
+    ></PopupMenuWithIcon>
+  );
+};

package/src/components/modal.tsx

@@ -1,33 +1,33 @@
-import { FloatWindow, FloatWindowCloseProps, FloatWindowShowProps } from './float-window';
-
-export class ModalWindow {
-  static async show({
-    title,
-    children,
-    contentMaxHeight,
-    contentMinWidth,
-    buttons,
-    noMoving = true,
-    noModal = false,
-    closeEvent,
-    handleClicked,
-    closeWhenClickOutside = true,
-    zIndex,
-    contentOverflowY,
-  }: FloatWindowShowProps): Promise<FloatWindowCloseProps> {
-    return FloatWindow.show({
-      title,
-      children,
-      contentMaxHeight,
-      contentMinWidth,
-      buttons,
-      noMoving,
-      noModal,
-      closeEvent,
-      handleClicked,
-      closeWhenClickOutside,
-      zIndex,
-      contentOverflowY,
-    });
-  }
-}
+import { FloatWindow, FloatWindowCloseProps, FloatWindowShowProps } from './float-window';
+
+export class ModalWindow {
+  static async show({
+    title,
+    children,
+    contentMaxHeight,
+    contentMinWidth,
+    buttons,
+    noMoving = true,
+    noModal = false,
+    closeEvent,
+    handleClicked,
+    closeWhenClickOutside = true,
+    zIndex,
+    contentOverflowY,
+  }: FloatWindowShowProps): Promise<FloatWindowCloseProps> {
+    return FloatWindow.show({
+      title,
+      children,
+      contentMaxHeight,
+      contentMinWidth,
+      buttons,
+      noMoving,
+      noModal,
+      closeEvent,
+      handleClicked,
+      closeWhenClickOutside,
+      zIndex,
+      contentOverflowY,
+    });
+  }
+}