lupine.components 1.1.53 → 1.1.55

package/package.json

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

package/src/component-pool/search-input/search-input.tsx

@@ -7,6 +7,7 @@ export interface SearchInputHookProps {
 export interface InputWithClearProps {
   placeholder?: string;
   onSearch: (value: string) => void;
+  onChange?: (value: string) => void;
   onClear?: () => void;
   onFocus?: () => void;
   onBlur?: () => void;
@@ -109,6 +110,7 @@ export const SearchInput = (props: InputWithClearProps) => {
             onSearch();
           }
         }}
+        onInput={(e) => props.onChange?.((e.target as HTMLInputElement).value)}
         onBlur={() => props.onBlur?.()}
         onFocus={() => props.onFocus?.()}
       />

package/src/components/loading-spin.tsx

@@ -1,5 +1,5 @@
-import { RefProps, Spinner02, SpinnerSize } from 'lupine.components';
-import { CssProps, callUnload, mountInnerComponent } from 'lupine.components';
+import { RefProps, CssProps, callUnload, mountInnerComponent } from 'lupine.web';
+import { Spinner02, SpinnerSize } from './spinner';
 
 export type LoadingSpinHookProps = {
   show?: () => void;
@@ -7,6 +7,7 @@ export type LoadingSpinHookProps = {
 };
 export type LoadingSpinProps = {
   hook?: LoadingSpinHookProps;
+  text?: string;
 };
 export const LoadingSpinComponent = (props: LoadingSpinProps) => {
   const css: CssProps = {
@@ -20,8 +21,20 @@ export const LoadingSpinComponent = (props: LoadingSpinProps) => {
     zIndex: 'var(--layer-guide)',
     '.loading-gif': {
       display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: '12px',
       margin: 'auto',
     },
+    '.loading-gif-text': {
+      color: '#fff',
+      fontSize: '15px',
+      fontWeight: '500',
+      lineHeight: '22px',
+      padding: '0 24px',
+      textAlign: 'center',
+      textShadow: '0 1px 2px rgba(0, 0, 0, 0.35)',
+    },
   };
   if (props.hook) {
     props.hook.show = () => {
@@ -39,13 +52,14 @@ export const LoadingSpinComponent = (props: LoadingSpinProps) => {
     <div ref={ref} css={css} class='loading-gif-box'>
       <div class='loading-gif'>
         <Spinner02 size={SpinnerSize.Large} />
+        {props.text && <div class='loading-gif-text'>{props.text}</div>}
       </div>
     </div>
   );
 };
 
 export class LoadingSpin {
-  static async show(): Promise<() => void> {
+  static async show(text?: string): Promise<() => void> {
     const handleClose = async () => {
       await callUnload(base);
       base.remove();
@@ -53,7 +67,7 @@ export class LoadingSpin {
 
     const base = document.createElement('div');
     document.body.appendChild(base);
-    await mountInnerComponent(base, <LoadingSpinComponent />);
+    await mountInnerComponent(base, <LoadingSpinComponent text={text} />);
     return handleClose;
   }
 }

package/src/components/redirect.tsx

@@ -1,4 +1,4 @@
-import { RefProps, refreshPaeg } from 'lupine.web';
+import { RefProps, refreshPage } from 'lupine.web';
 
 export type RedirectProps = {
   title?: string;
@@ -11,7 +11,7 @@ export const Redirect = ({ title = 'redirect...', url, delaySeconds = 0 }: Redir
   const ref: RefProps = {
     onLoad: async (el: Element) => {
       setTimeout(async () => {
-        await refreshPaeg(url);
+        await refreshPage(url);
       }, delaySeconds * 1000);
     },
   };

package/src/components/select-angle-component.tsx

@@ -1,4 +1,4 @@
-import { CssProps, RefProps } from 'lupine.components';
+import { CssProps, RefProps } from 'lupine.web';
 
 export type SelectAngleComponentHookProps = {
   setAngle?: (angle: number) => void;
@@ -21,7 +21,6 @@ export const SelectAngleComponent = (props: SelectAngleComponentProps) => {
       position: 'relative',
       backgroundColor: 'var(--primary-bg-color)',
       cursor: 'pointer',
-      touchAction: 'none',
     },
     '&needle': {
       width: '2px',
@@ -80,9 +79,9 @@ export const SelectAngleComponent = (props: SelectAngleComponentProps) => {
   const updateAngle = (ev: PointerEvent) => {
     const dx = ev.clientX - cx;
     const dy = ev.clientY - cy;
-    // atan2 返回弧度，顺时针0°为右侧
+    // atan2 return radians, 0° at right, clockwise
     let deg = Math.atan2(dy, dx) * (180 / Math.PI);
-    deg = (deg + 450) % 360; // 让上方为0°
+    deg = (deg + 450) % 360; // top is 0°
     updateAngleSub(deg);
   };
   const updateAngleSub = (deg: number) => {
@@ -99,7 +98,7 @@ export const SelectAngleComponent = (props: SelectAngleComponentProps) => {
     cx = rect.left + rect.width / 2;
     cy = rect.top + rect.height / 2;
 
-    (ev.currentTarget as HTMLElement).setPointerCapture(ev.pointerId);
+    (ev.target as HTMLElement).setPointerCapture(ev.pointerId);
     updateAngle(ev);
     mv = true;
   };
@@ -107,11 +106,17 @@ export const SelectAngleComponent = (props: SelectAngleComponentProps) => {
     if (!mv) {
       return;
     }
+    if (ev.buttons === 0) {
+      mv = false;
+      return;
+    }
     updateAngle(ev);
   };
   const pointerup = (ev: PointerEvent) => {
-    (ev.currentTarget as HTMLElement).releasePointerCapture(ev.pointerId);
     mv = false;
+    try {
+      (ev.target as HTMLElement).releasePointerCapture(ev.pointerId);
+    } catch (e) {}
   };
   const ref: RefProps = {};
   return (