lupine.components 1.1.9 → 1.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.9",
+  "version": "1.1.11",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",
@@ -39,4 +39,4 @@
   "dependencies": {
     "lupine.web": "^1.0.0"
   }
-}
+}

package/src/components/action-sheet.tsx

@@ -1,14 +1,16 @@
 import { CssProps, RefProps, VNode, mountInnerComponent } from 'lupine.web';
 import { backActionHelper } from '../lib';
 
-export type ActionSheetCloseProps = () => void;
+export type ActionSheetCloseProps = (reason?: ActionSheetCloseReasonProps) => void;
+
+export type ActionSheetCloseReasonProps = 'cancel' | 'confirm' | 'select' | undefined;
 
 export type ActionSheetShowProps = {
   title: string;
   children: string | VNode<any>;
   contentMaxWidth?: string;
   contentMaxHeight?: string;
-  closeEvent?: () => void;
+  closeEvent?: (reason?: ActionSheetCloseReasonProps) => void;
   closeWhenClickOutside?: boolean; // default true
   confirmButtonText?: string; // no showing if not set
   handleConfirmClicked?: (close: ActionSheetCloseProps) => void;
@@ -36,19 +38,19 @@ export class ActionSheet {
       if (handleConfirmClicked) {
         handleConfirmClicked(handleClose);
       } else {
-        handleClose();
+        handleClose('confirm');
       }
     };
     const onCancel = () => {
-      handleClose();
+      handleClose('cancel');
     };
     const onClickContainer = (event: any) => {
       if (closeWhenClickOutside !== false && event.target.classList.contains('act-sheet-box')) {
-        handleClose();
+        handleClose('cancel');
       }
     };
-    const handleClose = () => {
-      closeEvent?.();
+    const handleClose = (reason?: ActionSheetCloseReasonProps) => {
+      closeEvent?.(reason);
       ref.current.classList.remove('animation-open');
       setTimeout(() => {
         base.remove();
@@ -208,6 +210,7 @@ export class ActionSheetMessage {
   static async show({
     title,
     message,
+    contentMaxWidth,
     contentMaxHeight,
     closeWhenClickOutside = true,
     confirmButtonText,
@@ -216,7 +219,15 @@ export class ActionSheetMessage {
   }: ActionSheetMessageProps): Promise<ActionSheetCloseProps> {
     const handleClose = await ActionSheet.show({
       title,
-      children: <div css={{ padding: '8px', borderTop: '1px solid var(--primary-border-color)' }}>{message}</div>,
+      children: (
+        <div
+          css={{ padding: '8px', borderTop: '1px solid var(--primary-border-color)' }}
+          onClick={() => handleClose('select')}
+        >
+          {message}
+        </div>
+      ),
+      contentMaxWidth,
       contentMaxHeight,
       confirmButtonText,
       handleConfirmClicked,
@@ -227,6 +238,41 @@ export class ActionSheetMessage {
   }
 }
 
+export type ActionSheetMessagePromiseProps = {
+  message: string | VNode<any>;
+  title: string;
+  contentMaxWidth?: string;
+  contentMaxHeight?: string;
+  closeWhenClickOutside?: boolean;
+  confirmButtonText?: string;
+  zIndex?: string;
+};
+export const ActionSheetMessagePromise = async ({
+  title,
+  message,
+  contentMaxWidth,
+  contentMaxHeight,
+  closeWhenClickOutside = true,
+  confirmButtonText,
+  zIndex,
+}: ActionSheetMessagePromiseProps): Promise<void> => {
+  return new Promise(async (resolve, reject) => {
+    const closeEvent = (reason?: ActionSheetCloseReasonProps) => {
+      resolve();
+    };
+    await ActionSheet.show({
+      title,
+      children: <div css={{ padding: '8px', borderTop: '1px solid var(--primary-border-color)' }}>{message}</div>,
+      contentMaxWidth,
+      contentMaxHeight,
+      confirmButtonText,
+      closeEvent,
+      closeWhenClickOutside,
+      zIndex,
+    });
+  });
+};
+
 export type ActionSheetInputProps = Omit<
   ActionSheetShowProps,
   'children' | 'handleClicked' | 'closeEvent' | 'handleConfirmClicked'
@@ -268,3 +314,106 @@ export class ActionSheetInput {
     return handleClose;
   }
 }
+
+export type ActionSheetInputPromiseProps = {
+  defaultValue?: string;
+  title: string;
+  contentMaxWidth?: string;
+  contentMaxHeight?: string;
+  closeWhenClickOutside?: boolean;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+  zIndex?: string;
+};
+export const ActionSheetInputPromise = async ({
+  title,
+  defaultValue,
+  contentMaxWidth,
+  contentMaxHeight,
+  closeWhenClickOutside = true,
+  confirmButtonText = 'OK',
+  cancelButtonText = 'Cancel',
+  zIndex,
+}: ActionSheetInputPromiseProps): Promise<string | undefined> => {
+  return new Promise(async (resolve, reject) => {
+    const closeEvent = (reason?: ActionSheetCloseReasonProps) => {
+      if (reason !== 'confirm') {
+        resolve(undefined);
+      }
+    };
+    let value: string = defaultValue || '';
+    await ActionSheet.show({
+      title,
+      children: (
+        <div css={{ padding: '8px', borderTop: '1px solid var(--primary-border-color)' }}>
+          <input
+            class='input-base w-100p'
+            type='text'
+            value={value}
+            onInput={(e) => (value = (e.target as HTMLInputElement).value)}
+          />
+        </div>
+      ),
+      contentMaxWidth,
+      contentMaxHeight,
+      confirmButtonText,
+      handleConfirmClicked: (close) => {
+        resolve(value);
+        close('confirm');
+      },
+      closeEvent,
+      cancelButtonText,
+      closeWhenClickOutside,
+      zIndex,
+    });
+  });
+};
+
+export type ActionSheetSelectPromiseProps = {
+  title: string;
+  contentMaxWidth?: string;
+  contentMaxHeight?: string;
+  options?: string[];
+  closeWhenClickOutside?: boolean;
+  cancelButtonText?: string;
+  zIndex?: string;
+};
+export const ActionSheetSelectPromise = async ({
+  title,
+  contentMaxWidth,
+  contentMaxHeight,
+  options = ActionSheetSelectOptionsProps.Ok,
+  closeWhenClickOutside = true,
+  cancelButtonText = 'Cancel',
+  zIndex,
+}: ActionSheetSelectPromiseProps): Promise<number> => {
+  return new Promise(async (resolve, reject) => {
+    const handleClicked = async (index: number, close: ActionSheetCloseProps) => {
+      resolve(index);
+      close('select');
+    };
+    const closeEvent = (reason?: ActionSheetCloseReasonProps) => {
+      if (reason !== 'select') {
+        resolve(-1);
+      }
+    };
+    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>
+      ),
+      contentMaxWidth,
+      contentMaxHeight,
+      cancelButtonText,
+      closeEvent,
+      closeWhenClickOutside,
+      zIndex,
+    });
+  });
+};

package/src/components/html-load.tsx

@@ -0,0 +1,41 @@
+import { RefProps, VNode } from 'lupine.web';
+
+// load async html
+/*
+<HtmlLoad
+  html={async () => {
+    return <Footer title={await WebConfig.get('footer', `XXX`)}></Footer>;
+  }}
+></HtmlLoad>
+*/
+export type HtmlLoadHookProps = {
+  getRef?: () => RefProps;
+  render?: (html: string | VNode<any>) => void;
+};
+export type HtmlLoadProps = {
+  html: () => Promise<VNode<any>>;
+  initialHtml?: string | VNode<any>;
+  hook?: HtmlLoadHookProps;
+};
+export const HtmlLoad = (props: HtmlLoadProps) => {
+  const ref: RefProps = {
+    onLoad: async (el: Element) => {
+      const dom = await props.html();
+      await ref.mountInnerComponent!(dom);
+    },
+  };
+  if (props.hook) {
+    props.hook.getRef = () => ref;
+    props.hook.render = (html: string | VNode<any>) => {
+      ref.mountInnerComponent!(html);
+    };
+  }
+  return {
+    type: 'Fragment',
+    props: {
+      ref: ref,
+      children: props.initialHtml || '',
+    },
+    html: [],
+  };
+};

package/src/components/html-var.tsx

@@ -1,15 +1,15 @@
 import { RefProps, VNode } from 'lupine.web';
 
-export type HtmlVarResult = { value: string | VNode<any>; ref: RefProps; node: VNode<any> };
-
+export type HtmlVarValueProps = string | VNode<any> | (() => Promise<VNode<any>>);
+export type HtmlVarResult = { value: HtmlVarValueProps; ref: RefProps; node: VNode<any> };
 export class HtmlVar implements HtmlVarResult {
-  private _value: string | VNode<any>;
+  private _value: HtmlVarValueProps;
   private _dirty = false;
   private _ref: RefProps;
   private resolve!: () => void;
   private promise: Promise<void>;
 
-  constructor(initial?: string | VNode<any>) {
+  constructor(initial?: HtmlVarValueProps) {
     this.promise = new Promise<void>((res) => {
       this.resolve = res;
     });
@@ -28,7 +28,8 @@ export class HtmlVar implements HtmlVarResult {
   }
 
   private async update(): Promise<void> {
-    await this._ref.mountInnerComponent!(this._value);
+    const v = typeof this._value === 'function' ? await this._value() : this._value;
+    await this._ref.mountInnerComponent!(v);
     this._dirty = false;
     this._value = '';
   }
@@ -38,7 +39,7 @@ export class HtmlVar implements HtmlVarResult {
     await this.promise;
   }
 
-  set value(value: string | VNode<any>) {
+  set value(value: HtmlVarValueProps) {
     this._value = value;
     if (this._dirty) {
       return;
@@ -55,7 +56,7 @@ export class HtmlVar implements HtmlVarResult {
     });
   }
 
-  get value(): string | VNode<any> {
+  get value(): HtmlVarValueProps {
     return this._ref.current ? this._ref.current.innerHTML : this._value;
   }
 
@@ -64,13 +65,15 @@ export class HtmlVar implements HtmlVarResult {
   }
 
   get node(): VNode<any> {
-    this._dirty = false;
+    // if value is a function, it will be loaded later in onLoad
+    const delayLoad = typeof this._value === 'function';
+    this._dirty = delayLoad ? true : false;
     // the Fragment Tag will be present in the html if ref is assigned
     return {
       type: 'Fragment',
       props: {
         ref: this._ref,
-        children: this._value,
+        children: delayLoad ? '' : this._value,
       },
       html: [],
     };

package/src/components/index.ts

@@ -6,6 +6,7 @@ export * from './drag-refresh';
 export * from './editable-label';
 export * from './float-window';
 export * from './grid';
+export * from './html-load';
 export * from './html-var';
 export * from './input-with-title';
 export * from './link-item';
@@ -23,10 +24,14 @@ export * from './paging-link';
 export * from './panel';
 export * from './popup-menu';
 export * from './progress';
+export * from './radio-label-component';
 export * from './redirect';
 export * from './resizable-splitter';
+export * from './select-angle-component';
 export * from './select-with-title';
+export * from './slide-tab-component';
 export * from './spinner';
+export * from './stars-component';
 export * from './svg';
 export * from './tabs';
 export * from './text-glow';

package/src/components/radio-label-component.tsx

@@ -0,0 +1,36 @@
+import { bindGlobalStyle, CssProps } from 'lupine.components';
+
+export const RadioLabelComponent = (props: {
+  label: string;
+  name: string;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+  className?: string;
+  radioClassname?: string;
+}) => {
+  const css: CssProps = {
+    display: 'flex',
+    '& > label': {
+      display: 'flex',
+      alignItems: 'center',
+    },
+  };
+  bindGlobalStyle('radio-label-component', css);
+
+  return (
+    <div class={'radio-label-component' + (props.className ? ' ' + props.className : '')}>
+      <label>
+        <input
+          type='radio'
+          name={props.name}
+          class={'input-base input-s' + (props.radioClassname ? ' ' + props.radioClassname : '')}
+          checked={props.checked}
+          disabled={props.disabled}
+          onChange={(event) => props.onChange?.((event.target as HTMLInputElement).checked)}
+        />
+        <span class='ml-ss'>{props.label}</span>
+      </label>
+    </div>
+  );
+};

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

@@ -0,0 +1,127 @@
+import { CssProps, RefProps } from 'lupine.components';
+
+export type SelectAngleComponentHookProps = {
+  setAngle?: (angle: number) => void;
+};
+export type SelectAngleComponentProps = {
+  size?: string;
+  angle: number;
+  onChange: (angle: number) => void;
+  hook?: SelectAngleComponentHookProps;
+};
+export const SelectAngleComponent = (props: SelectAngleComponentProps) => {
+  const css: CssProps = {
+    width: props.size || '80px',
+    height: props.size || '80px',
+    '&circle': {
+      width: '100%',
+      height: '100%',
+      borderRadius: '50%',
+      border: '2px solid #aaa',
+      position: 'relative',
+      backgroundColor: 'var(--primary-bg-color)',
+      cursor: 'pointer',
+    },
+    '&needle': {
+      width: '2px',
+      height: '50%',
+      backgroundColor: 'red',
+      position: 'absolute',
+      top: '0',
+      left: '50%',
+      transformOrigin: 'bottom center',
+      transform: 'rotate(90deg)',
+    },
+    '&tips': {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      fontSize: '12px',
+      color: 'var(--primary-color)',
+      fontWeight: '600',
+      zIndex: '10',
+    },
+    '&a0, &a90, &a180, &a270': {
+      width: '6px',
+      height: '6px',
+      borderRadius: '50%',
+      backgroundColor: '#333',
+      position: 'absolute',
+      top: '0',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      fontSize: '12px',
+      color: '#333',
+    },
+    '&a90': {
+      top: '50%',
+      left: '100%',
+    },
+    '&a180': {
+      top: '100%',
+      left: '50%',
+    },
+    '&a270': {
+      top: '50%',
+      left: '0',
+    },
+  };
+
+  let cx: number = 0;
+  let cy: number = 0;
+  let mv = false;
+  if (props.hook) {
+    props.hook.setAngle = (angle) => {
+      updateAngleSub(angle);
+    };
+  }
+  const updateAngle = (ev: MouseEvent) => {
+    const dx = ev.clientX - cx;
+    const dy = ev.clientY - cy;
+    // atan2 返回弧度，顺时针0°为右侧
+    let deg = Math.atan2(dy, dx) * (180 / Math.PI);
+    deg = (deg + 450) % 360; // 让上方为0°
+    updateAngleSub(deg);
+  };
+  const updateAngleSub = (deg: number) => {
+    const needle = ref.$('&needle');
+    const text = ref.$('&tips');
+    needle.style.transform = `rotate(${deg}deg)`;
+    text.textContent = `${deg.toFixed(0)}°`;
+    props.onChange(deg);
+  };
+
+  const pointerdown = (ev: MouseEvent) => {
+    const picker = ref.$('&circle');
+    const rect = picker.getBoundingClientRect();
+    cx = rect.left + rect.width / 2;
+    cy = rect.top + rect.height / 2;
+
+    updateAngle(ev);
+    mv = true;
+  };
+  const pointermove = (ev: MouseEvent) => {
+    if (!mv) {
+      return;
+    }
+    updateAngle(ev);
+  };
+  const pointerup = () => {
+    mv = false;
+  };
+  const ref: RefProps = {};
+  return (
+    <div ref={ref} css={css}>
+      <div class='&circle' onPointerDown={pointerdown} onPointerMove={pointermove} onPointerUp={pointerup}>
+        <div class='&needle'></div>
+        <div class='&tips'>90°</div>
+
+        <div class='&a0' onClick={() => updateAngleSub(0)}></div>
+        <div class='&a90' onClick={() => updateAngleSub(90)}></div>
+        <div class='&a180' onClick={() => updateAngleSub(180)}></div>
+        <div class='&a270' onClick={() => updateAngleSub(270)}></div>
+      </div>
+    </div>
+  );
+};

package/src/components/slide-tab-component.tsx

@@ -0,0 +1,149 @@
+import { CssProps, RefProps, VNode, bindGlobalStyle } from 'lupine.components';
+
+export interface SlideTabProps {
+  pages: { title: string; content: VNode<any> }[];
+};
+export const SlideTabComponent = (props: SlideTabProps) => {
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    fontSize: '12px',
+    borderRadius: '6px',
+    padding: '0px 8px 4px 8px',
+    // marginBottom: '8px',
+    height: '100%',
+    '.slide-tab-c-list': {
+      flex: 1,
+      borderRadius: '6px',
+      display: 'flex',
+      overflowX: 'auto',
+      width: '100%',
+      scrollSnapType: 'x mandatory',
+      gap: '8px',
+      paddingBottom: '10px',
+      scrollBehavior: 'smooth',
+      WebkitOverflowScrolling: 'touch',
+    },
+    '.slide-tab-c-slide': {
+      width: '100%',
+      overflow: 'hidden',
+      position: 'relative',
+      minWidth: '100%',
+      flexShrink: 0,
+      scrollSnapAlign: 'start',
+      height: '100%',
+      overflowY: 'auto',
+    },
+
+    '.slide-tab-c-nav': {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      backgroundColor: 'var(--primary-bg-color)',
+      position: 'sticky',
+      top: 0,
+      zIndex: 1,
+    },
+    '.slide-tab-c-nav-wrap': {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      padding: '2px 4px',
+      borderRadius: '4px',
+      backgroundColor: 'var(--secondary-bg-color)',
+    },
+    '.slide-tab-c-nav-item': {
+      cursor: 'pointer',
+      padding: '4px 8px',
+      borderRadius: '4px',
+      marginRight: '8px',
+    },
+    '.slide-tab-c-nav-item.active': {
+      backgroundColor: 'var(--primary-accent-color)',
+      color: 'white',
+    },
+  };
+  bindGlobalStyle('slide-tab-c-box', css);
+
+  const ref: RefProps = {};
+  let slideIndex = 0;
+  let manualScroll = false;
+  let scrollEndTimer: NodeJS.Timeout | null = null;
+  const drawerScroll = () => {
+    if (manualScroll) {
+      return;
+    }
+    if (scrollEndTimer) {
+      clearTimeout(scrollEndTimer);
+    }
+    scrollEndTimer = setTimeout(() => {
+      drawerScrollStop();
+    }, 100);
+  };
+  const resetSlides = (index: number) => {
+    const dots = ref.$all('.slide-tab-c-nav-item');
+    for (let i = 0; i < dots.length; i++) {
+      dots[i].classList.toggle('active', i === index);
+    }
+  };
+  const drawerScrollStop = () => {
+    const drawer = ref.$('.slide-tab-c-list');
+    const width = drawer.clientWidth;
+    const currentScrollIndex = Math.round(drawer.scrollLeft / width);
+    slideIndex = currentScrollIndex;
+    resetSlides(slideIndex);
+  };
+  const moveSlide = (slideIndex: number) => {
+    const drawer = ref.$('.slide-tab-c-list');
+    const children = ref.$all('.slide-tab-c-slide');
+    if (!drawer || !children || children.length === 0) {
+      return;
+    }
+    const target = children[slideIndex];
+    if (!target) {
+      return;
+    }
+    const offsetLeft = target.offsetLeft;
+    manualScroll = true;
+    drawer.scrollTo({
+      left: offsetLeft,
+      behavior: 'smooth',
+    });
+
+    resetSlides(slideIndex);
+    setTimeout(() => {
+      manualScroll = false;
+    }, 300);
+  };
+
+  return (
+    <section class='slide-tab-c-box' ref={ref}>
+      <div class='slide-tab-c-nav'>
+        <div class='slide-tab-c-nav-wrap'>
+          {props.pages.map((page, index) => (
+            <div
+              class={`slide-tab-c-nav-item ${index === 0 ? 'active' : ''}`}
+              onClick={(event) => {
+                event.preventDefault();
+                moveSlide(index);
+              }}
+            >
+              {page.title}
+            </div>
+          ))}
+
+        </div>
+      </div>
+      <div class='slide-tab-c-list no-scrollbar-container' onScroll={drawerScroll}>
+
+        {props.pages.map((page) => (
+          <div class='slide-tab-c-slide no-scrollbar-container'>
+            {page.content}
+          </div>
+        ))}
+
+      </div>
+    </section>
+  );
+};

package/src/components/stars-component.tsx

@@ -0,0 +1,66 @@
+import { bindGlobalStyle, CssProps, RefProps } from 'lupine.components';
+
+export type StarsHookComponentProps = {
+  setValue: (value: number) => void;
+  getValue: () => number;
+};
+export type StarsComponentProps = {
+  maxLength: number;
+  value: number;
+  onChange?: (value: number) => void;
+  hook?: StarsHookComponentProps;
+  fontSize?: string;
+};
+export const StarsComponent = (props: StarsComponentProps) => {
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'row',
+    '.stars-label': {
+      color: '#9d9d9d',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+    },
+    '.stars-label.active': {
+      color: 'blue',
+    },
+    '.stars-label .full, .stars-label.active .outline': {
+      display: 'none',
+    },
+    '.stars-label.active .full, .stars-label .outline': {
+      display: 'inline',
+    },
+  };
+  bindGlobalStyle('stars-box', css);
+
+  const setValue = (value: number) => {
+    props.value = value;
+    const stars = ref.$all('.stars-label') as NodeListOf<Element>;
+    stars.forEach((star, index) => {
+      star.classList.toggle('active', index < value);
+    });
+  };
+  if (props.hook) {
+    props.hook.setValue = (value) => {
+      setValue(value);
+    };
+    props.hook.getValue = () => props.value;
+  }
+  const ref: RefProps = {};
+  return (
+    <div style={{ fontSize: props.fontSize || '20px' }} ref={ref} class='stars-box'>
+      {Array.from({ length: props.maxLength }).map((value, index) => (
+        <label
+          class={'stars-label' + (index < props.value ? ' active' : '')}
+          onClick={() => {
+            setValue(index + 1);
+            props.onChange?.(index + 1);
+          }}
+        >
+          <i class='ifc-icon ma-cards-heart full'></i>
+          <i class='ifc-icon ma-cards-heart-outline outline'></i>
+        </label>
+      ))}
+    </div>
+  );
+};