lupine.components 1.1.10 → 1.1.13

package/package.json

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

@@ -100,7 +100,7 @@ export class ActionSheet {
           borderRadius: '8px',
           backgroundColor: 'var(--cover-bg-color)', //'#fefefe',
           width: '100%',
-          maxWidth: contentMaxWidth ? contentMaxWidth : `clamp(200px, 70%, 800px)`,
+          maxWidth: contentMaxWidth ? contentMaxWidth : `clamp(200px, 90%, 600px)`,
           margin: '0 auto',
         },
         '.act-sheet-bottom-item, .act-sheet-item': {
@@ -109,7 +109,7 @@ export class ActionSheet {
           cursor: 'pointer',
           transition: 'all 0.3s ease',
           width: '100%',
-          maxWidth: contentMaxWidth ? contentMaxWidth : `clamp(200px, 70%, 800px)`,
+          maxWidth: contentMaxWidth ? contentMaxWidth : `clamp(200px, 90%, 600px)`,
           borderTop: '1px solid var(--primary-border-color)',
         },
         '.act-sheet-bottom-item': {

package/src/components/index.ts

@@ -24,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/mobile-components/mobile-header-title-icon.tsx

@@ -28,9 +28,12 @@ export interface MobileHeaderTitleIconProps {
   onBack?: (event: Event) => void;
   left?: VNode<any> | HtmlVar;
   right?: VNode<any> | HtmlVar;
+  background?: string;
+  color?: string;
+  noShadow?: boolean;
 }
 // there may have a few MobileHeaderTitleIcon for different pages
-export const MobileHeaderTitleIcon = ({ title, onBack, left, right }: MobileHeaderTitleIconProps) => {
+export const MobileHeaderTitleIcon = ({ title, onBack, left, right, background, color, noShadow }: MobileHeaderTitleIconProps) => {
   // const processBack = (event: Event) => {
   //   if (onBack) {
   //     onBack(event);
@@ -43,8 +46,11 @@ export const MobileHeaderTitleIcon = ({ title, onBack, left, right }: MobileHead
     flexDirection: 'row',
     width: '100vw',
     padding: '6px 0',
-    backgroundColor: 'var(--activatable-bg-color-normal)',
-    boxShadow: 'var(--mobile-header-shadow)',
+    // backgroundColor: 'var(--activatable-bg-color-normal)',
+    // boxShadow: 'var(--mobile-header-shadow)',
+    color: color || 'var(--primary-color)',
+    background: background || 'var(--activatable-bg-color-normal)',
+    boxShadow: noShadow ? 'unset' : 'var(--mobile-header-shadow)',
     zIndex: 'var(--layer-inside)', // bring boxShadow to front
     '.mhti-title': {
       display: 'flex',

package/src/components/mobile-components/mobile-header-with-back.tsx

@@ -32,6 +32,11 @@ export const HeaderWithBackFrame = ({
   left,
   right,
   noHeader = false,
+  background,
+  color,
+  noShadow,
+  contentColor,
+  contentBackground,
 }: {
   children: VNode<any>;
   title: VNode<any> | string | HtmlVar;
@@ -39,6 +44,11 @@ export const HeaderWithBackFrame = ({
   left?: VNode<any> | HtmlVar;
   right?: VNode<any> | HtmlVar;
   noHeader?: boolean;
+  color?: string;
+  background?: string;
+  noShadow?: boolean;
+  contentColor?: string;
+  contentBackground?: string;
 }) => {
   left = left || <HeaderWithBackFrameLeft onClick={onBack} />;
   right = right || <HeaderWithBackFrameRight onClick={onBack} />;
@@ -48,6 +58,7 @@ export const HeaderWithBackFrame = ({
     width: '100%',
     height: '100%',
     minHeight: '100%',
+    background: background || 'var(--activatable-bg-color-normal)',
     '.header-back-top': {
       display: 'flex',
       flexDirection: 'row',
@@ -63,6 +74,8 @@ export const HeaderWithBackFrame = ({
       overflowY: 'auto',
       scrollbarWidth: 'none',
       position: 'relative',
+      color: contentColor || 'var(--primary-color)',
+      background: contentBackground || 'var(--activatable-bg-color-normal)',
       '&::-webkit-scrollbar': {
         display: 'none',
         // height: '0',
@@ -97,7 +110,7 @@ export const HeaderWithBackFrame = ({
   const ref: RefProps = {};
   return (
     <div ref={ref} css={css} class='header-back-frame'>
-      {!noHeader && <MobileHeaderTitleIcon onBack={onBack} left={domLeft} title={domCenter} right={domRight} />}
+      {!noHeader && <MobileHeaderTitleIcon onBack={onBack} left={domLeft} title={domCenter} right={domRight} background={background} color={color} noShadow={noShadow} />}
       <div class='header-back-content'>{children}</div>
     </div>
   );

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>
+  );
+};

package/src/lib/blob-utils.ts

@@ -1,7 +1,7 @@
-export const blobToBase64 = (blob: Blob): Promise<string> => {
+export const blobToBase64 = (blob: Blob, removeMeta?: boolean): Promise<string> => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
-    reader.onloadend = () => resolve(reader.result as string); // data:audio/mpeg;base64,...
+    reader.onloadend = () => resolve(removeMeta ? (reader.result as string).split(',')[1] : reader.result as string); // data:audio/mpeg;base64,...
     reader.onerror = reject;
     reader.readAsDataURL(blob);
   });

package/src/lib/encode-html.ts

@@ -0,0 +1,27 @@
+export const encodeHtml = (str: string): string => {
+  return str.replace(
+    /[&<>'"]/g,
+    (tag) =>
+      ({
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        "'": '&#39;',
+        '"': '&quot;',
+      }[tag] || '')
+  );
+};
+
+export const decodeHtml = (str: string): string => {
+  return str.replace(
+    /&(\D+);/gi,
+    (tag) =>
+      ({
+        '&amp;': '&',
+        '&lt;': '<',
+        '&gt;': '>',
+        '&#39;': "'",
+        '&quot;': '"',
+      }[tag] || '')
+  );
+};

package/src/lib/index.ts

@@ -11,7 +11,7 @@ export * from './download-link';
 export * from './download-stream';
 export * from './drag-util';
 export * from './dynamical-load';
-export * from './escape-html';
+export * from './encode-html';
 export * from './find-parent-tag';
 export * from './format-bytes';
 export * from './lite-dom';

package/src/lib/escape-html.ts

@@ -1,9 +0,0 @@
-export const escapeHtml = (str: string | number | boolean) => {
-  if (!str || typeof str !== 'string') return str;
-  return str
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
-};