lupine.components 1.0.15 → 1.0.17

package/package.json

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

package/src/components/action-sheet.tsx

@@ -4,10 +4,13 @@ export type ActionSheetCloseProps = () => void;
 
 export type ActionSheetShowProps = {
   title: string;
-  children: VNode<any>;
+  children: string | VNode<any>;
+  contentMaxWidth?: string;
   contentMaxHeight?: string;
   closeEvent?: () => void;
   closeWhenClickOutside?: boolean; // default true
+  confirmButtonText?: string; // no showing if not set
+  handleConfirmClicked?: (close: ActionSheetCloseProps) => void;
   cancelButtonText?: string; // no showing if not set
   zIndex?: string;
 };
@@ -19,12 +22,22 @@ export class ActionSheet {
   static async show({
     title,
     children,
+    contentMaxWidth,
     contentMaxHeight,
     closeEvent,
     closeWhenClickOutside = true,
+    confirmButtonText = '',
+    handleConfirmClicked,
     cancelButtonText = 'Cancel',
     zIndex,
   }: ActionSheetShowProps): Promise<ActionSheetCloseProps> {
+    const onConfirm = () => {
+      if (handleConfirmClicked) {
+        handleConfirmClicked(handleClose);
+      } else {
+        handleClose();
+      }
+    };
     const onCancel = () => {
       handleClose();
     };
@@ -64,7 +77,7 @@ export class ActionSheet {
         bottom: '0px',
         left: '0px',
         width: '100%',
-        maxHeight: contentMaxHeight ? contentMaxHeight : '',
+        maxHeight: contentMaxHeight ? contentMaxHeight : '100%',
         color: 'var(--primary-color)',
         padding: '8px',
         transition: 'all 0.3s',
@@ -84,7 +97,7 @@ export class ActionSheet {
           borderRadius: '8px',
           backgroundColor: 'var(--cover-bg-color)', //'#fefefe',
           width: '100%',
-          maxWidth: '450px',
+          maxWidth: contentMaxWidth ? contentMaxWidth : `clamp(200px, 70%, 800px)`,
           margin: '0 auto',
         },
         '.act-sheet-bottom-item, .act-sheet-item': {
@@ -93,7 +106,7 @@ export class ActionSheet {
           cursor: 'pointer',
           transition: 'all 0.3s ease',
           width: '100%',
-          maxWidth: '450px',
+          maxWidth: contentMaxWidth ? contentMaxWidth : `clamp(200px, 70%, 800px)`,
           borderTop: '1px solid var(--primary-border-color)',
         },
         '.act-sheet-bottom-item': {
@@ -104,6 +117,11 @@ export class ActionSheet {
         '.act-sheet-bottom-item:hover, .act-sheet-item:hover': {
           fontWeight: 'bold',
         },
+        '.act-sheet-confirm, .act-sheet-item': {
+          borderRadius: 'unset',
+          marginTop: 'unset',
+          maxWidth: 'unset',
+        },
       },
     };
     const component = (
@@ -112,6 +130,11 @@ export class ActionSheet {
           <div class='act-sheet-content'>
             <div class='act-sheet-title'>{title}</div>
             {children}
+            {confirmButtonText && (
+            <div class='act-sheet-bottom-item act-sheet-confirm' onClick={onConfirm}>
+              {confirmButtonText}
+            </div>
+          )}
           </div>
           {cancelButtonText && (
             <div class='act-sheet-bottom-item' onClick={onCancel}>
@@ -131,7 +154,7 @@ export class ActionSheet {
 
 export const ActionSheetSelectOptionsProps = {
   YesNo: ['Yes', 'No'],
-  OkCancel: ['OK'],
+  Ok: ['OK'],
 };
 export type ActionSheetSelectProps = Omit<ActionSheetShowProps, 'children'> & {
   options: string[];
@@ -142,10 +165,12 @@ export class ActionSheetSelect {
   static async show({
     title,
     contentMaxHeight,
-    options = ActionSheetSelectOptionsProps.OkCancel,
+    options = ActionSheetSelectOptionsProps.Ok,
     closeEvent,
     handleClicked,
     closeWhenClickOutside = true,
+    confirmButtonText,
+    handleConfirmClicked,
     cancelButtonText = 'Cancel',
   }: ActionSheetSelectProps): Promise<ActionSheetCloseProps> {
     const handleClose = await ActionSheet.show({
@@ -160,6 +185,8 @@ export class ActionSheetSelect {
         </div>
       ),
       contentMaxHeight,
+      confirmButtonText,
+      handleConfirmClicked,
       cancelButtonText,
       closeEvent,
       closeWhenClickOutside,
@@ -169,7 +196,7 @@ export class ActionSheetSelect {
 }
 
 export type ActionSheetMessageProps = Omit<ActionSheetShowProps, 'children' | 'handleClicked' | 'closeEvent'> & {
-  message: string;
+  message: string | VNode<any>;
 };
 export class ActionSheetMessage {
   static async show({
@@ -177,13 +204,17 @@ export class ActionSheetMessage {
     message,
     contentMaxHeight,
     closeWhenClickOutside = true,
+    confirmButtonText,
+    handleConfirmClicked,
     cancelButtonText = '',
   }: ActionSheetMessageProps): Promise<ActionSheetCloseProps> {
     const handleClose = await ActionSheet.show({
       title,
-      children: <div css={{ padding: '0 8px 16px 8px' }}>{message}</div>,
+      children: <div css={{ padding: '8px',borderTop: '1px solid var(--primary-border-color)', }}>{message}</div>,
       contentMaxHeight,
-      cancelButtonText,
+      confirmButtonText,
+      handleConfirmClicked,
+        cancelButtonText,
       closeWhenClickOutside,
     });
     return handleClose;

package/src/components/html-var.tsx

@@ -1,4 +1,4 @@
-import { RefProps, VNode, mountComponents, replaceInnerhtml } from 'lupine.web';
+import { RefProps, VNode } from 'lupine.web';
 
 export type HtmlVarResult = { value: string | VNode<any>; ref: RefProps; node: VNode<any> };
 export const HtmlVar = (initial?: string | VNode<any>): HtmlVarResult => {
@@ -6,12 +6,7 @@ export const HtmlVar = (initial?: string | VNode<any>): HtmlVarResult => {
   let _dirty = false;
   const waitUpdate = async (value: string | VNode<any>) => {
     if (!ref.current) return;
-    if (typeof value === 'object' && value.type && value.props) {
-      await mountComponents(ref.current, value);
-    } else {
-      await replaceInnerhtml(ref.current, value as string);
-      // ref.current.innerHTML = value;
-    }
+    await ref.loadContent!(value);
     _dirty = false;
   };
   const ref: RefProps = {
@@ -19,10 +14,6 @@ export const HtmlVar = (initial?: string | VNode<any>): HtmlVarResult => {
       _dirty && waitUpdate(_value);
     },
   };
-  const FragmentRef = (props: any) => {
-    return <>{props.children}</>;
-  };
-
   return {
     set value(value: string | VNode<any>) {
       _value = value;
@@ -35,10 +26,10 @@ export const HtmlVar = (initial?: string | VNode<any>): HtmlVarResult => {
     get ref() {
       return ref;
     },
-    // _fragment_ref is a special id to add ref to a fragment and it is processed in mount-components
     get node() {
       _dirty = false;
-      return <FragmentRef _fragment_ref={ref}>{_value}</FragmentRef>;
+      // the Fragment Tag will be present in the html if ref is assigned
+      return { type: 'Fragment', props: { ref, children: _value }, html: [] };
     },
   };
 };

package/src/components/spinner.tsx

@@ -35,7 +35,7 @@ export const Spinner02 = ({
   color?: string;
 }) => {
   const base = parseInt(size.replace('px', ''));
-  const ballSize = Array.from({ length: 7 }, (_, i) => `${i * base / 15 / 7}px`);
+  const ballSize = Array.from({ length: 7 }, (_, i) => `${(i * base / 15 / 7).toFixed(2)}px`);
   const css: any = {
     width: size,
     height: size,

package/src/lib/upload-file.ts

@@ -73,9 +73,12 @@ export const uploadFile = async (
     chunkSize = _saveChunkSize.size;
   }
   if (len <= chunkSize) {
-    const uploaded = await uploadFileChunk(file, 0, 1, uploadUrl, key, retryCount, retryMessage);
-    if (!uploaded || uploaded.status !== 'ok') {
-      return false;
+    const result = await uploadFileChunk(file, 0, 1, uploadUrl, key, retryCount, retryMessage);
+    if (!result || result.status !== 'ok') {
+      return result;
+    }
+    if (progressFn) {
+      progressFn(1, 0, len);
     }
     return true;
   }
@@ -85,11 +88,11 @@ export const uploadFile = async (
     const start = i * chunkSize;
     const end = Math.min((i + 1) * chunkSize, len);
     const chunk = file.slice(start, end);
-    const uploaded = await uploadFileChunk(chunk, i, totalChunks, uploadUrl, key, retryCount, retryMessage);
-    if (!uploaded || uploaded.status !== 'ok') {
-      return false;
+    const result = await uploadFileChunk(chunk, i, totalChunks, uploadUrl, key, retryCount, retryMessage);
+    if (!result || result.status !== 'ok') {
+      return result;
     }
-    key = uploaded.key;
+    key = result.key;
     if (progressFn) {
       progressFn(Math.round(((i + 1) / totalChunks) * 100) / 100, i, totalChunks);
     }