lupine.components 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "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/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/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/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

@@ -1,3 +1,5 @@
+import { getRenderPageProps } from "lupine.web";
+
 const _saveChunkSize = {
   size: 1024 * 500,
 };
@@ -8,10 +10,11 @@ export const getChunkSize = () => {
   return _saveChunkSize.size;
 };
 export const checkUploadedFileSize = async (uploadUrl: string) => {
-  const response = await fetch(uploadUrl + '?check-size=1', {
-    method: 'POST',
-  });
-  const json = await response.json();
+  // const response = await fetch(uploadUrl + '?check-size=1', {
+  //   method: 'POST',
+  // });
+  // const json = await response.json();
+  const json = await getRenderPageProps().renderPageFunctions.fetchData(uploadUrl + '?check-size=1');
   return json && json.size ? json.size : 0;
 };
 
@@ -30,30 +33,33 @@ export const uploadFileChunk = async (
   if (key) {
     url += `&key=${key}`;
   }
-  const response = await fetch(url, {
-    method: 'POST',
-    body: chunk,
-  });
-  const json = await response.json();
+  // const response = await fetch(url, {
+  //   method: 'POST',
+  //   body: chunk,
+  // });
+  // const json = await response.json();
+  console.log(`uploadFileChunk, ${uploadUrl}, index: ${chunkNumber}, total: ${totalChunks}, len: ${chunk.length}`);
+  const json = await getRenderPageProps().renderPageFunctions.fetchData(url, chunk);
   return json;
 };
 
 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)',