lupine.components 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://uuware.com/",
@@ -33,8 +33,5 @@
   },
   "dependencies": {
     "lupine.web": "^1.0.0"
-  },
-  "devDependencies": {
-    "@types/node": "^22.10.5"
   }
 }

package/src/components/action-sheet.tsx

@@ -0,0 +1,191 @@
+import { CssProps, RefProps, VNode, mountComponents } from 'lupine.web';
+
+export type ActionSheetCloseProps = () => void;
+
+export type ActionSheetShowProps = {
+  title: string;
+  children: VNode<any>;
+  contentMaxHeight?: string;
+  closeEvent?: () => void;
+  closeWhenClickOutside?: boolean; // default true
+  cancelButtonText?: string; // no showing if not set
+  zIndex?: string;
+};
+
+// because it's over a mask, so it can use primary colors
+export class ActionSheet {
+  static hostNode: HTMLElement;
+
+  static async show({
+    title,
+    children,
+    contentMaxHeight,
+    closeEvent,
+    closeWhenClickOutside = true,
+    cancelButtonText = 'Cancel',
+    zIndex,
+  }: ActionSheetShowProps): Promise<ActionSheetCloseProps> {
+    const onCancel = () => {
+      handleClose();
+    };
+    const onClickContainer = (event: any) => {
+      if (closeWhenClickOutside !== false && event.target.className === 'act-sheet-box') {
+        handleClose();
+      }
+    };
+    const handleClose = () => {
+      closeEvent?.();
+      ref.current.classList.remove('animation-open');
+      setTimeout(() => {
+        base.remove();
+      }, 300);
+    };
+
+    const base = document.createElement('div');
+    const ref: RefProps = {
+      onLoad: async () => {
+        setTimeout(() => {
+          ref.current.classList.add('animation-open');
+        }, 1);
+      },
+    };
+    const cssContainer: CssProps = {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'var(--cover-mask-bg-color)',
+      '.act-sheet-body': {
+        display: 'flex',
+        flexDirection: 'column',
+        textAlign: 'center',
+        position: 'fixed',
+        bottom: '0px',
+        left: '0px',
+        width: '100%',
+        maxHeight: contentMaxHeight ? contentMaxHeight : '',
+        color: 'var(--primary-color)',
+        padding: '8px',
+        transition: 'all 0.3s',
+        transform: 'translateY(100%)',
+        '&.animation-open': {
+          transform: 'translateY(0)',
+        },
+        '.act-sheet-title': {
+          padding: '20px 15px 10px 15px',
+          opacity: 0.5,
+        },
+        '.act-sheet-content': {
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+          overflowY: 'auto',
+          borderRadius: '8px',
+          backgroundColor: 'var(--cover-bg-color)', //'#fefefe',
+          width: '100%',
+          maxWidth: '450px',
+          margin: '0 auto',
+        },
+        '.act-sheet-bottom-item, .act-sheet-item': {
+          backgroundColor: 'var(--cover-bg-color)', //'#fefefe',
+          padding: '20px 0',
+          cursor: 'pointer',
+          transition: 'all 0.3s ease',
+          width: '100%',
+          maxWidth: '450px',
+          borderTop: '1px solid var(--primary-border-color)',
+        },
+        '.act-sheet-bottom-item': {
+          borderRadius: '8px',
+          margin: '0 auto',
+          marginTop: '4px',
+        },
+        '.act-sheet-bottom-item:hover, .act-sheet-item:hover': {
+          fontWeight: 'bold',
+        },
+      },
+    };
+    const component = (
+      <div css={cssContainer} class='act-sheet-box' onClick={onClickContainer}>
+        <div ref={ref} class='act-sheet-body'>
+          <div class='act-sheet-content'>
+            <div class='act-sheet-title'>{title}</div>
+            {children}
+          </div>
+          {cancelButtonText && (
+            <div class='act-sheet-bottom-item' onClick={onCancel}>
+              {cancelButtonText}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+    base.style.position = 'fixed';
+    base.style.zIndex = zIndex || 'var(--layer-actionsheet-window)';
+    document.body.appendChild(base);
+    await mountComponents(base, component);
+    return handleClose;
+  }
+}
+
+export const ActionSheetSelectOptionsProps = {
+  YesNo: ['Yes', 'No'],
+  OkCancel: ['OK'],
+};
+export type ActionSheetSelectProps = Omit<ActionSheetShowProps, 'children'> & {
+  options: string[];
+  handleClicked: (index: number, close: ActionSheetCloseProps) => void;
+};
+
+export class ActionSheetSelect {
+  static async show({
+    title,
+    contentMaxHeight,
+    options = ActionSheetSelectOptionsProps.OkCancel,
+    closeEvent,
+    handleClicked,
+    closeWhenClickOutside = true,
+    cancelButtonText = 'Cancel',
+  }: ActionSheetSelectProps): Promise<ActionSheetCloseProps> {
+    const handleClose = await ActionSheet.show({
+      title,
+      children: (
+        <div>
+          {options.map((option, index) => (
+            <div class='act-sheet-item' key={index} onClick={() => handleClicked(index, handleClose)}>
+              {option}
+            </div>
+          ))}
+        </div>
+      ),
+      contentMaxHeight,
+      cancelButtonText,
+      closeEvent,
+      closeWhenClickOutside,
+    });
+    return handleClose;
+  }
+}
+
+export type ActionSheetMessageProps = Omit<ActionSheetShowProps, 'children' | 'handleClicked' | 'closeEvent'> & {
+  message: string;
+};
+export class ActionSheetMessage {
+  static async show({
+    title,
+    message,
+    contentMaxHeight,
+    closeWhenClickOutside = true,
+    cancelButtonText = '',
+  }: ActionSheetMessageProps): Promise<ActionSheetCloseProps> {
+    const handleClose = await ActionSheet.show({
+      title,
+      children: <div css={{ padding: '0 8px 16px 8px' }}>{message}</div>,
+      contentMaxHeight,
+      cancelButtonText,
+      closeWhenClickOutside,
+    });
+    return handleClose;
+  }
+}

package/src/components/drag-refresh.tsx

@@ -1,4 +1,4 @@
-import { CssProps, RefProps } from '../jsx';
+import { CssProps, RefProps } from 'lupine.web';
 import { Spinner02, SpinnerSize } from './spinner';
 
 export type DragRefreshCloseProps = () => void;

package/src/components/editable-label.tsx

@@ -1,4 +1,4 @@
-import { CssProps, RefProps } from '../jsx';
+import { CssProps, RefProps } from 'lupine.web';
 
 export type EditableLabelHookProps = {
   updateValue?: (value: string) => void;

package/src/components/float-window.tsx

@@ -80,7 +80,10 @@ export class FloatWindow {
 
     const ref: RefProps = {
       onLoad: async () => {
-        ref.current.classList.add('transition', 'animation');
+        ref.current.classList.add('transition');
+        setTimeout(() => {
+          ref.current.classList.add('animation');
+        }, 1);
         setTimeout(() => {
           // don't need transition for moving
           ref.current.classList.remove('transition');

package/src/components/html-var.tsx

@@ -1,6 +1,7 @@
 import { RefProps, VNode, mountComponents } from 'lupine.web';
 
-export const HtmlVar = (initial?: string | VNode<any>) => {
+export type HtmlVarResult = { value: string | VNode<any>; ref: RefProps; node: VNode<any> };
+export const HtmlVar = (initial?: string | VNode<any>): HtmlVarResult => {
   let _value: string | VNode<any> = initial || '';
   let _dirty = false;
   const waitUpdate = async (value: string | VNode<any>) => {
@@ -11,10 +12,12 @@ export const HtmlVar = (initial?: string | VNode<any>) => {
       ref.current.innerHTML = value;
     }
     _dirty = false;
-  }
-  const ref: RefProps = { onLoad: async (el: Element) => {
-    _dirty && waitUpdate(_value);
-  } };
+  };
+  const ref: RefProps = {
+    onLoad: async (el: Element) => {
+      _dirty && waitUpdate(_value);
+    },
+  };
   const FragmentRef = (props: any) => {
     return <>{props.children}</>;
   };

package/src/components/index.ts

@@ -1,4 +1,5 @@
 
+export * from './action-sheet';
 export * from './button-push-animation';
 export * from './button';
 export * from './drag-refresh';

package/src/components/panel.tsx

@@ -1,4 +1,4 @@
-import { CssProps } from '../jsx';
+import { CssProps } from 'lupine.web';
 
 export type PanelProps = {
   children: any;

package/src/components/progress.tsx

@@ -1,4 +1,4 @@
-import { RefProps } from '../jsx';
+import { RefProps } from 'lupine.web';
 import { HtmlVar } from './html-var';
 
 export type ProgressHookProps = {

package/src/components/redirect.tsx

@@ -1,4 +1,4 @@
-import { RefProps } from '../jsx';
+import { RefProps } from 'lupine.web';
 
 export type RedirectProps = {
   title?: string;

package/src/components/select-with-title.tsx

@@ -1,4 +1,4 @@
-import { CssProps } from '../jsx';
+import { CssProps } from 'lupine.web';
 
 export type SelectOptionProps = {
   option: string;

package/src/components/text-glow.tsx

@@ -1,4 +1,4 @@
-import { CssProps } from '../jsx';
+import { CssProps } from 'lupine.web';
 
 export type TextGlowProps = {
   text: string;

package/src/components/text-wave.tsx

@@ -1,4 +1,4 @@
-import { CssProps } from "../jsx";
+import { CssProps } from "lupine.web";
 
 export type TextLoadingProps = {
   text: string;

package/src/lib/drag-util.ts

@@ -0,0 +1,118 @@
+/*
+  const moveFn = createDragUtil();
+  moveFn.setOnMoveCallback((clientX: number, clientY: number, movedX: number, movedY: number) => {
+    const dragDom = moveFn.getDraggingDom();
+    if (dragDom?.classList.contains('xxx')) {
+      updateRangeMMove(clientX, true, dragDom, _saved.stopDoms);
+    } else if (dragDom?.classList.contains('yyy')) {
+      updatePicMMove(clientX);
+    }
+  });
+    <div
+      onMouseMove={moveFn.onMouseMove}
+      onMouseUp={moveFn.onMouseUp}
+      onTouchMove={moveFn.onTouchMove}
+      onTouchEnd={moveFn.onTouchEnd}
+    >
+      <div onMouseDown={moveFn.onMouseDown} onTouchStart={moveFn.onTouchStart}></div>
+    </div>
+
+    // when zooming an image, the way to scale slowly
+    const slowDelta = 1 + (scale - 1) * 0.2;
+    tempScale = lastScale * slowDelta;
+*/
+export const createDragUtil = () => {
+  let isDragging = false;
+  let initialX = 0;
+  let initialY = 0;
+  let draggingDom: HTMLDivElement | null = null;
+  let onMoveCallback: (clientX: number, clientY: number, movedX: number, movedY: number) => void = () => {};
+  let onScaleCallback: (scale: number) => void = () => {};
+
+  let isZooming = false;
+  let initialDistance = 0;
+
+  const getDistance = (t1: Touch, t2: Touch) => {
+    const dx = t2.clientX - t1.clientX;
+    const dy = t2.clientY - t1.clientY;
+    return Math.sqrt(dx * dx + dy * dy);
+  };
+  return {
+    setOnMoveCallback: (callback: (clientX: number, clientY: number, movedX: number, movedY: number) => void) => {
+      onMoveCallback = callback;
+    },
+    setOnScaleCallback: (callback: (scale: number) => void) => {
+      onScaleCallback = callback;
+    },
+    getDistance,
+    getDraggingDom: () => draggingDom,
+    onMouseDown: (event: MouseEvent) => {
+      event.preventDefault();
+      if (event.buttons !== 1) {
+        isDragging = false;
+        draggingDom = null;
+        return;
+      }
+      isDragging = true;
+      draggingDom = event.currentTarget as HTMLDivElement;
+      initialX = event.clientX;
+      initialY = event.clientY;
+    },
+    onMouseMove: (event: MouseEvent) => {
+      if (event.buttons === 0 || !draggingDom) {
+        isDragging = false;
+        draggingDom = null;
+        return;
+      }
+      onMoveCallback(event.clientX, event.clientY, event.clientX - initialX, event.clientY - initialY);
+    },
+    onMouseUp: () => {
+      isDragging = false;
+      isZooming = false;
+      draggingDom = null;
+    },
+
+    onTouchStart: (event: TouchEvent) => {
+      if (event.touches.length === 1) {
+        isDragging = true;
+        draggingDom = event.currentTarget as HTMLDivElement;
+        initialX = event.touches[0].clientX;
+        initialY = event.touches[0].clientY;
+      } else if (event.touches.length === 2) {
+        initialDistance = getDistance(event.touches[0], event.touches[1]);
+        isZooming = true;
+      } else {
+        isDragging = false;
+        draggingDom = null;
+      }
+    },
+    onTouchMove: (event: TouchEvent) => {
+      if (isZooming) {
+        if (event.touches.length === 2) {
+          event.preventDefault(); // 防止页面滚动
+          const newDistance = getDistance(event.touches[0], event.touches[1]);
+          const delta = newDistance / initialDistance;
+          //   const newScale = Math.min(Math.max(1, scale * delta), 4); // 限制缩放范围
+          onScaleCallback(delta);
+          return;
+        }
+      }
+      if (!isDragging || event.touches.length === 0 || !draggingDom) {
+        isDragging = false;
+        draggingDom = null;
+        return;
+      }
+      onMoveCallback(
+        event.touches[0].clientX,
+        event.touches[0].clientY,
+        event.touches[0].clientX - initialX,
+        event.touches[0].clientY - initialY
+      );
+    },
+    onTouchEnd: () => {
+      isDragging = false;
+      isZooming = false;
+      draggingDom = null;
+    },
+  };
+};

package/src/lib/index.ts

@@ -2,6 +2,7 @@ export * from './dom';
 export * from './date-utils';
 export * from './deep-merge';
 export * from './document-ready';
+export * from './drag-util';
 export * from './dynamical-load';
 export * from './format-bytes';
 export * from './lite-dom';

package/src/lib/upload-file.ts

@@ -39,21 +39,22 @@ export const uploadFileChunk = async (
 };
 
 export const uploadFile = async (
-  file: File,
+  file: File | string,
   uploadUrl: string,
   progressFn?: (percentage: number, chunkNumber: number, totalChunks: number) => void,
   chunkSize = _saveChunkSize.size
 ) => {
   // const uploadedSize = await checkUploadedFileSize(uploadUrl);
   let key = '';
-  if (file.size <= chunkSize) {
+  const len = file instanceof File ? file.size : file.length;
+  if (len <= chunkSize) {
     return await uploadFileChunk(file, 0, 1, uploadUrl, key);
   }
 
-  const totalChunks = Math.ceil(file.size / chunkSize);
+  const totalChunks = Math.ceil(len / chunkSize);
   for (let i = 0; i < totalChunks; i++) {
     const start = i * chunkSize;
-    const end = Math.min((i + 1) * chunkSize, file.size);
+    const end = Math.min((i + 1) * chunkSize, len);
     const chunk = file.slice(start, end);
     const uploaded = await uploadFileChunk(chunk, i, totalChunks, uploadUrl, key);
     if (!uploaded || uploaded.chunkNumber === i.toString() || !uploaded.key) {

package/src/styles/dark-themes.ts

@@ -9,18 +9,20 @@ export const darkThemes: ThemeProps = {
   '--scrollbar-thumb-bg': '#373636',
   '--scrollbar-active-thumb-bg': '#5b5b5b',
 
-  '--primary-color': '#aeaeae',
+  '--primary-color': '#e5e5e5',
   '--primary-color-disabled': '#7d7d7d',
   '--primary-bg-color': '#000000',
   '--primary-border-color': '#aeaeae',
   '--primary-border': '1px solid var(--primary-border-color)',
-  // '--secondary-color': '#b3b3b3',
-  // '--secondary-bg-color': '#151515',
-  // '--secondary-border': '1px solid #303030',
   '--primary-opacity': '0.5', // used for dark theme
   '--primary-disabled-opacity': '0.7', // used for dark theme
   '--primary-accent-color': '#1a588a', // used for radio and checkbox's background color
 
+  '--secondary-color': '#747474',
+  '--secondary-bg-color': '#1c1c1c',
+  '--secondary-border-color': '#494949',
+  '--secondary-border': '1px solid var(--secondary-border-color)',
+
   // including menus, tabs
   '--activatable-color-normal': 'var(--primary-color)',
   '--activatable-bg-color-normal': 'var(--primary-bg-color)',

package/src/styles/light-themes.ts

@@ -15,13 +15,15 @@ export const lightThemes: ThemeProps = {
   '--primary-bg-color': '#ffffff',
   '--primary-border-color': '#858585',
   '--primary-border': '1px solid var(--primary-border-color)',
-  // '--secondary-color': '#505050',
-  // '--secondary-bg-color': '#ffffff',
-  // '--secondary-border': '1px solid #858585',
   '--primary-opacity': 'unset', // used for dark theme
   '--primary-disabled-opacity': '0.5', // used for dark theme
   '--primary-accent-color': '#0a74c9', // used for radio and checkbox's background color
 
+  '--secondary-color': '#818181',
+  '--secondary-bg-color': '#eeeeee',
+  '--secondary-border-color': '#a0a0a0',
+  '--secondary-border': '1px solid var(--secondary-border-color)',
+
   // including menus, tabs, sidebars
   '--activatable-color-normal': 'var(--primary-color)',
   '--activatable-bg-color-normal': 'var(--primary-bg-color)',

package/src/styles/shared-themes.ts

@@ -11,6 +11,7 @@ export const sharedThemes: ThemeProps = {
   '--layer-modal': '600',
   '--layer-modal-over': '610',
   '--layer-float-window': '700',
+  '--layer-actionsheet-window': '710',
   '--layer-menu': '800', // popup menu
   '--layer-menu-sub': '810',
   '--layer-notice': '900', // notice, loading, toast